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

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 { isDark } = useGuestThemeVariant();

  return (
    <YStack
      height={height}
      borderRadius={borderRadius}
      overflow="hidden"
      position="relative"
      backgroundColor="$muted"
      style={{
        boxShadow: isDark ? '0 10px 18px rgba(2, 6, 23, 0.36)' : '0 8px 14px rgba(15, 23, 42, 0.16)',
      }}
    >
      {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>
  );
}
