"use client";

import Link from "next/link";

import { ArrowRight, BookOpen, KeyRound, LayoutTemplate } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";

const STEPS = [
  {
    icon: KeyRound,
    title: "Auth & roles",
    body: "Mock login lives in src/lib/auth.ts with super_admin, staff, and client. Staff/admin use the dashboard; clients use /portal.",
  },
  {
    icon: LayoutTemplate,
    title: "Layouts",
    body: "Dashboard layout wraps AuthGuard, sidebar shell, and search. Duplicate route groups when you add new surfaces.",
  },
  {
    icon: BookOpen,
    title: "Data layer",
    body: "Replace src/data/clients.ts and localStorage-backed registration with your API once the backend exists.",
  },
];

export function OverviewGettingStarted() {
  return (
    <Card className="flex flex-col">
      <CardHeader className="pb-3">
        <CardTitle className="font-semibold text-base">Extend this boilerplate</CardTitle>
      </CardHeader>
      <CardContent className="flex-1 space-y-4 px-6">
        {STEPS.map((s) => {
          const Icon = s.icon;
          return (
            <div key={s.title} className="flex gap-3">
              <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
                <Icon className="size-4 text-primary" />
              </div>
              <div>
                <p className="font-medium text-sm">{s.title}</p>
                <p className="mt-1 text-muted-foreground text-xs leading-relaxed">{s.body}</p>
              </div>
            </div>
          );
        })}
      </CardContent>
      <CardFooter className="border-t pt-3">
        <Button asChild variant="ghost" size="sm" className="w-full text-xs">
          <Link href="/dashboard/ai-assistant">
            Try AI assistant (mock UI) <ArrowRight className="ml-1 size-3" />
          </Link>
        </Button>
      </CardFooter>
    </Card>
  );
}