import * as Icons from "lucide-react"
import { Button } from "../ui/button"
import { Link } from "@inertiajs/react"
import { cn } from "@/lib/utils"

type Props = {
    icon: keyof typeof Icons
    title: string
    description: string

    actionLabel?: string

    // choose one
    onClick?: () => void
    href?: string

    className?: string
}

export default function EmptyState({ icon, title, description, actionLabel = "Add", onClick, href, className = "" }: Props) {


    const LucideIcon = Icons[icon] as Icons.LucideIcon

    return (
        <div className={cn('flex flex-col items-center justify-center py-6 text-center space-y-4 ', className)}>

            {LucideIcon && <div className="p-4 rounded-full bg-muted"> <LucideIcon className="w-8 h-8 text-primary" /></div>}

            <div className="space-y-1">
                <h3 className="text-base font-semibold">{title}</h3>
                <p className="text-sm text-muted-foreground max-w-sm">   {description}  </p>
            </div>

            {href ? (
                <Link href={href}> <Button size='sm' className="bg-primary hover:bg-primary text-white cursor-pointer">    {actionLabel}  </Button>  </Link>
            ) : onClick ? (
                <Button size='sm' className="bg-primary hover:bg-primary text-white  cursor-pointer" onClick={onClick}   >  {actionLabel} </Button>
            ) : null}

        </div>
    )
}