"use client"

import Link from "next/link"
import {
    CalendarCheck2Icon,
    CarIcon,
    ClipboardCheckIcon,
    ClipboardListIcon,
    PackageIcon,
    ReceiptIcon,
    ReceiptTextIcon,
    UsersIcon,
    WrenchIcon,
} from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"

type Shortcut = {
    label: string
    href: string
    icon: typeof CarIcon
    color: string
    bg: string
}

const shortcuts: Shortcut[] = [
    {
        label: "Job Cards",
        href: "/sales/job-cards",
        icon: ClipboardListIcon,
        color: "text-emerald-600",
        bg: "bg-emerald-500/10",
    },
    {
        label: "Appointments",
        href: "/calendar/appointment/list",
        icon: CalendarCheck2Icon,
        color: "text-sky-600",
        bg: "bg-sky-500/10",
    },
    {
        label: "New Estimate",
        href: "/sales/estimates/new",
        icon: ReceiptTextIcon,
        color: "text-violet-600",
        bg: "bg-violet-500/10",
    },
    {
        label: "Invoices",
        href: "/sales/invoice",
        icon: ReceiptIcon,
        color: "text-amber-600",
        bg: "bg-amber-500/10",
    },
    {
        label: "Inspections",
        href: "/sales/inspections",
        icon: ClipboardCheckIcon,
        color: "text-rose-600",
        bg: "bg-rose-500/10",
    },
    {
        label: "Customers",
        href: "/sales/customers",
        icon: UsersIcon,
        color: "text-blue-600",
        bg: "bg-blue-500/10",
    },
    {
        label: "Vehicles",
        href: "/sales/vehicles",
        icon: CarIcon,
        color: "text-indigo-600",
        bg: "bg-indigo-500/10",
    },
    {
        label: "Parts",
        href: "/items/parts",
        icon: PackageIcon,
        color: "text-orange-600",
        bg: "bg-orange-500/10",
    },
    {
        label: "Services",
        href: "/items/services",
        icon: WrenchIcon,
        color: "text-teal-600",
        bg: "bg-teal-500/10",
    },
]

export function QuickShortcuts() {
    return (
        <Card>
            <CardHeader>
                <CardTitle className="text-sm font-medium">Quick Shortcuts</CardTitle>
            </CardHeader>
            <CardContent>
                <div className="grid grid-cols-3 gap-2 sm:grid-cols-4 lg:grid-cols-9">
                    {shortcuts.map((shortcut) => (
                        <Link
                            key={shortcut.label}
                            href={shortcut.href}
                            className="flex flex-col items-center gap-2 rounded-lg border p-3 text-center transition-colors hover:bg-muted/50"
                        >
                            <div className={`rounded-md p-2 ${shortcut.bg}`}>
                                <shortcut.icon className={`h-5 w-5 ${shortcut.color}`} />
                            </div>
                            <span className="text-[11px] font-medium leading-tight">
                                {shortcut.label}
                            </span>
                        </Link>
                    ))}
                </div>
            </CardContent>
        </Card>
    )
}