import Link from 'next/link';
import { Icon } from '@/components/marketing/icons';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { cn } from '@/lib/utils';

export type StoreHealthItem = {
  id: string;
  label: string;
  done: boolean;
};

export function StoreHealth({ items, completePercent }: { items: StoreHealthItem[]; completePercent: number }) {
  return (
    <Card className="h-full overflow-hidden">
      <CardHeader>
        <div className="flex items-start justify-between gap-3">
          <div>
            <CardTitle>Store Health</CardTitle>
            <p className="mt-1 text-sm text-muted-foreground">Finish the basics so customers trust your shop.</p>
          </div>
          <div className="rounded-2xl bg-primary-soft px-3 py-2 text-center">
            <p className="text-lg font-extrabold text-primary">{completePercent}%</p>
            <p className="text-[10px] font-semibold uppercase tracking-wide text-primary/80">Complete</p>
          </div>
        </div>
        <div className="mt-3 h-2 overflow-hidden rounded-full bg-muted" role="progressbar" aria-valuenow={completePercent} aria-valuemin={0} aria-valuemax={100} aria-label="Store completeness">
          <div className="h-full rounded-full bg-primary transition-[width] duration-300" style={{ width: `${completePercent}%` }} />
        </div>
      </CardHeader>
      <CardContent>
        <ul className="space-y-2.5">
          {items.map(item => (
            <li key={item.id} className="flex items-center gap-2.5 text-sm">
              <span className={cn(
                'inline-flex size-5 items-center justify-center rounded-full',
                item.done ? 'bg-success-soft text-success' : 'bg-muted text-muted-foreground',
              )}>
                <Icon name={item.done ? 'check' : 'plus'} size={12} />
              </span>
              <span className={cn(item.done ? 'text-navy' : 'text-muted-foreground')}>{item.label}</span>
            </li>
          ))}
        </ul>
      </CardContent>
      <CardFooter>
        <Button asChild variant="soft" className="w-full">
          <Link href="/dashboard/storefront/settings">Improve Store</Link>
        </Button>
      </CardFooter>
    </Card>
  );
}