import { View, ScrollView } from 'react-native';
import { router } from 'expo-router';
import { Text } from '@/components/ui/text';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';

export default function LoginScreen() {
  return (
    <ScrollView className="flex-1 bg-background" contentContainerStyle={{ padding: 16, paddingVertical: 48 }}>
      <Text className="mb-6 text-center text-2xl font-bold text-gray-900">Yaltopia Tickets</Text>
      <Card className="mb-4">
        <CardHeader>
          <CardTitle>Sign in</CardTitle>
          <CardDescription>Use the same account as the web app.</CardDescription>
        </CardHeader>
        <CardContent className="gap-3">
          <Button className="bg-primary">
            <Text className="text-primary-foreground font-medium">Email & password</Text>
          </Button>
          <Button variant="outline">
            <Text className="font-medium">Continue with Google</Text>
          </Button>
        </CardContent>
      </Card>
      <Button variant="ghost" onPress={() => router.back()}>
        <Text className="font-medium">Back</Text>
      </Button>
    </ScrollView>
  );
}