import { createFileRoute } from '@tanstack/react-router'
import { Title, Text, SimpleGrid, Card, Group, Stack } from '@pikku/mantine/core'
import { m } from '@/i18n/messages'
import { useLocale } from '@/i18n/config'
import type { I18nNode } from '@pikku/react'
import { BedDouble, CheckSquare, Sailboat, CalendarDays } from 'lucide-react'

export const Route = createFileRoute('/_authenticated/')({
  component: DashboardPage,
})

function DashboardPage() {
  useLocale()
  return (
    <Stack gap="lg">
      <Title order={2}>{m.dashboard_title()}</Title>
      <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }}>
        <SummaryCard icon={BedDouble} label={m.dashboard_stays()} color="teal" />
        <SummaryCard icon={CheckSquare} label={m.dashboard_tasks()} color="blue" />
        <SummaryCard icon={Sailboat} label={m.dashboard_boats()} color="cyan" />
        <SummaryCard icon={CalendarDays} label={m.dashboard_retreats()} color="grape" />
      </SimpleGrid>
    </Stack>
  )
}

function SummaryCard({ icon: Icon, label, color }: { icon: React.ComponentType<any>; label: I18nNode; color: string }) {
  return (
    <Card withBorder radius="md" p="md">
      <Group>
        <Icon size={24} color={`var(--mantine-color-${color}-6)`} />
        <Text fw={600}>{label}</Text>
      </Group>
    </Card>
  )
}