import React from 'react';
import { YStack } from '@tamagui/stacks';
import { useAppearance } from '@/hooks/use-appearance';

type PhotoFrameTileProps = {
  height: number;
  borderRadius?: number | string;
  children?: React.ReactNode;
  shimmer?: boolean;
  shimmerDelayMs?: number;
};

export default function PhotoFrameTile({
  height,
  borderRadius = '$tile',
  children,
  shimmer = false,
  shimmerDelayMs = 0,
}: PhotoFrameTileProps) {
  const { resolved } = useAppearance();
  const isDark = resolved === 'dark';

  return (
    <YStack
      height={height}
      borderRadius={borderRadius}
      padding={6}
      backgroundColor={isDark ? 'rgba(255, 255, 255, 0.04)' : 'rgba(15, 23, 42, 0.04)'}
      borderWidth={1}
      borderColor={isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.12)'}
      style={{
        boxShadow: isDark ? '0 18px 32px rgba(2, 6, 23, 0.4)' : '0 16px 28px rgba(15, 23, 42, 0.12)',
      }}
    >
      <YStack
        flex={1}
        borderRadius={borderRadius}
        backgroundColor="$muted"
        borderWidth={1}
        borderColor={isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.1)'}
        overflow="hidden"
        position="relative"
        style={{
          boxShadow: isDark
            ? 'inset 0 0 0 1px rgba(255, 255, 255, 0.06)'
            : 'inset 0 0 0 1px rgba(15, 23, 42, 0.04)',
        }}
      >
        {shimmer ? (
          <YStack
            position="absolute"
            top={-40}
            bottom={-40}
            left="-60%"
            width="60%"
            backgroundColor="transparent"
            style={{
              backgroundImage:
                'linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0))',
              animation: 'guestNightShimmer 4.6s ease-in-out infinite',
              animationDelay: `${shimmerDelayMs}ms`,
            }}
          />
        ) : null}
        <YStack position="relative" zIndex={1} flex={1}>
          {children}
        </YStack>
      </YStack>
    </YStack>
  );
}