import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Button,
  Badge,
} from '@{{PROJECT_NAME}}/ui';

export default function DashboardPage() {
  return (
    <div className="space-y-6">
      {/* Welcome card */}
      <Card>
        <CardHeader>
          <CardTitle>Welcome to {{COMPONENT_NAME}}</CardTitle>
          <CardDescription>
            This is your Next.js 14 dashboard, part of the{' '}
            <code className="bg-[var(--surface-200)] px-1.5 py-0.5 rounded text-sm">
              {{PROJECT_NAME}}
            </code>{' '}
            monorepo.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex gap-3">
            <Button>Get Started</Button>
            <Button variant="outline">View Docs</Button>
          </div>
        </CardContent>
      </Card>

      {/* Stats grid */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardDescription>Total Users</CardDescription>
            <CardTitle className="text-3xl">1,234</CardTitle>
          </CardHeader>
          <CardContent>
            <Badge variant="success">+12% from last month</Badge>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <CardDescription>Active Sessions</CardDescription>
            <CardTitle className="text-3xl">567</CardTitle>
          </CardHeader>
          <CardContent>
            <Badge variant="info">Live</Badge>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <CardDescription>API Requests</CardDescription>
            <CardTitle className="text-3xl">89.2k</CardTitle>
          </CardHeader>
          <CardContent>
            <Badge variant="warning">High traffic</Badge>
          </CardContent>
        </Card>
      </div>

      {/* Edit hint */}
      <p className="text-sm text-[var(--text-muted)]">
        Edit this file at{' '}
        <code className="bg-[var(--surface-200)] px-1.5 py-0.5 rounded">
          apps/{{COMPONENT_NAME}}/src/app/(dashboard)/dashboard/page.tsx
        </code>
      </p>
    </div>
  );
}
