import React from 'react';
import { useNavigate } from 'react-router-dom';
import { XStack, YStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Button } from '@tamagui/button';
import { ArrowLeft } from 'lucide-react';

type MockupFrameProps = {
  title: string;
  subtitle?: string;
  hideHeader?: boolean;
  backgroundStyle?: React.CSSProperties;
  children: React.ReactNode;
};

export default function MockupFrame({
  title,
  subtitle,
  hideHeader,
  backgroundStyle,
  children,
}: MockupFrameProps) {
  const navigate = useNavigate();

  return (
    <YStack
      minHeight="100vh"
      backgroundColor="$background"
      padding="$4"
      gap="$4"
      style={backgroundStyle}
    >
      {!hideHeader && (
        <XStack alignItems="center" justifyContent="space-between" gap="$3">
          <Button
            size="$3"
            backgroundColor="$surface"
            borderRadius="$pill"
            borderWidth={1}
            borderColor="$borderColor"
            onPress={() => navigate('/mockups')}
          >
            <XStack alignItems="center" gap="$2">
              <ArrowLeft size={16} color="#0F172A" />
              <Text fontSize="$3" fontWeight="$7">
                Back
              </Text>
            </XStack>
          </Button>
          <YStack alignItems="flex-end" gap="$1">
            <Text fontSize="$5" fontWeight="$8" fontFamily="$display">
              {title}
            </Text>
            {subtitle ? (
              <Text fontSize="$2" color="$color" opacity={0.6}>
                {subtitle}
              </Text>
            ) : null}
          </YStack>
        </XStack>
      )}
      {children}
    </YStack>
  );
}