import { Link } from '@inertiajs/react';
import {
    ArrowRight,
    BadgeCheck,
    Building2,
    Globe,
    Plus,
    ShieldCheck,
} from 'lucide-react';

export default function EmptyState({ createHref }: { createHref: string }) {
    return (
        <div className="flex flex-col items-center justify-center px-6 py-28">
            <div className="bg-primary/10 mb-5 flex h-16 w-16 items-center justify-center rounded-2xl">
                <Building2 className="text-primary h-8 w-8" />
            </div>
            <h2 className="text-foreground mb-2 text-xl font-semibold">
                No apps yet
            </h2>
            <p className="text-muted-foreground mb-8 max-w-xs text-center text-sm">
                Create your first financial portal to get started with Upepo
                Finance.
            </p>
            <Link
                href={createHref}
                className="pf-btn flex items-center gap-2 px-6 py-2.5 text-sm"
            >
                <Plus className="h-4 w-4" />
                Create your first app
                <ArrowRight className="h-4 w-4" />
            </Link>

            <div className="border-border mt-12 flex flex-wrap items-center justify-center gap-6 rounded-2xl border px-8 py-5">
                {[
                    { icon: ShieldCheck, label: 'AES-256 encryption' },
                    { icon: Globe, label: 'Isolated database per app' },
                    { icon: BadgeCheck, label: 'GDPR compliant' },
                ].map(({ icon: Icon, label }) => (
                    <div key={label} className="flex items-center gap-2">
                        <Icon className="text-primary h-4 w-4 shrink-0" />
                        <span className="text-muted-foreground text-xs">
                            {label}
                        </span>
                    </div>
                ))}
            </div>
        </div>
    );
}