import React from 'react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite';
import { useTranslation } from 'react-i18next';

type SheetProps = {
  open: boolean;
  title: string;
  onClose: () => void;
  children: React.ReactNode;
  footer?: React.ReactNode;
  /** Optional bottom offset so content sits above the bottom nav/safe-area. */
  bottomOffsetPx?: number;
};

export function MobileSheet({ open, title, onClose, children, footer, bottomOffsetPx = 88 }: SheetProps) {
  const { t } = useTranslation('mobile');
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
      <YStack
        width="100%"
        maxWidth={520}
        borderTopLeftRadius={24}
        borderTopRightRadius={24}
        backgroundColor="white"
        padding="$4"
        paddingBottom="$7"
        space="$3"
        shadowColor="#0f172a"
        shadowOpacity={0.12}
        shadowRadius={18}
        shadowOffset={{ width: 0, height: -8 }}
        maxHeight="82vh"
        overflow="auto"
        // keep sheet above bottom nav / safe area
        style={{ marginBottom: `max(env(safe-area-inset-bottom, 0px), ${bottomOffsetPx}px)` }}
      >
        <XStack alignItems="center" justifyContent="space-between">
          <Text fontSize="$md" fontWeight="800" color="#111827">
            {title}
          </Text>
          <Pressable onPress={onClose}>
            <Text fontSize="$md" color="#6b7280">
              {t('actions.close', 'Close')}
            </Text>
          </Pressable>
        </XStack>
        {children}
        {footer ? footer : null}
      </YStack>
    </div>
  );
}