import { View, ScrollView, Pressable } from 'react-native';
import { router } from 'expo-router';
import { Text } from '@/components/ui/text';
import { Card, CardContent } from '@/components/ui/card';

const MOCK_NOTIFICATIONS = [
  { id: '1', title: 'Invoice reminder', body: 'Invoice #2 to Robin Murray is due in 2 days.', time: '2h ago', read: false },
  { id: '2', title: 'Payment received', body: 'Payment of $500 received for Invoice #4.', time: '1d ago', read: true },
  { id: '3', title: 'Proforma submission', body: 'Vendor A submitted a quote for Marketing Landing Page.', time: '2d ago', read: true },
];

export default function NotificationsScreen() {
  return (
    <ScrollView className="flex-1 bg-background" contentContainerStyle={{ padding: 16, paddingBottom: 32 }}>
      <View className="mb-4 flex-row items-center justify-between">
        <Text className="text-xl font-semibold text-gray-900">Notifications</Text>
        <Pressable onPress={() => router.push('/notifications/settings')}>
          <Text className="text-primary font-medium">Settings</Text>
        </Pressable>
      </View>

      {MOCK_NOTIFICATIONS.map((n) => (
        <Card key={n.id} className={`mb-2 ${!n.read ? 'border-primary/30' : ''}`}>
          <CardContent className="py-3">
            <Text className="font-semibold text-gray-900">{n.title}</Text>
            <Text className="text-muted-foreground mt-1 text-sm">{n.body}</Text>
            <Text className="text-muted-foreground mt-1 text-xs">{n.time}</Text>
          </CardContent>
        </Card>
      ))}
    </ScrollView>
  );
}