import React from 'react';
import { YStack } from '@tamagui/stacks';
import type { YStackProps } from '@tamagui/stacks';
import { useGuestThemeVariant } from '../lib/guestTheme';

type SurfaceCardProps = YStackProps & {
  glow?: boolean;
};

export default function SurfaceCard({ children, glow = false, ...props }: SurfaceCardProps) {
  const { isDark } = useGuestThemeVariant();
  const borderColor = isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.12)';
  const boxShadow = isDark
    ? glow
      ? '0 22px 40px rgba(6, 10, 22, 0.55)'
      : '0 16px 30px rgba(2, 6, 23, 0.35)'
    : glow
      ? '0 22px 38px rgba(15, 23, 42, 0.16)'
      : '0 14px 24px rgba(15, 23, 42, 0.12)';

  return (
    <YStack
      padding="$4"
      borderRadius="$card"
      backgroundColor="$surface"
      borderWidth={1}
      borderColor={borderColor}
      style={{ boxShadow }}
      {...props}
    >
      {children}
    </YStack>
  );
}