import Image from 'next/image';
import Link from 'next/link';
import { vendorStorefrontRoute } from '@/lib/routes';
import type { Artisan } from '@/lib/types';

function initials(name: string) {
  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0]!.toUpperCase()).join('') || '?';
}

export function ArtisanCard({ artisan }: { artisan: Artisan }) {
  const meta = [artisan.craft, artisan.location].filter(Boolean).join(' · ');

  return (
    <div className="card flex flex-col overflow-hidden text-center">
      {artisan.image ? (
        <Image
          src={artisan.image}
          alt={artisan.shop}
          width={400}
          height={300}
          className="aspect-[4/3] w-full object-cover"
        />
      ) : (
        <div className="flex aspect-[4/3] w-full items-center justify-center bg-navy-800 font-serif text-4xl font-semibold text-beige" aria-hidden="true">
          {initials(artisan.shop || artisan.name)}
        </div>
      )}
      <div className="flex flex-1 flex-col p-5">
        <h3 className="font-serif text-lg font-semibold text-navy-800">{artisan.shop}</h3>
        {artisan.name && artisan.name !== artisan.shop && <p className="text-sm text-gold-600">by {artisan.name}</p>}
        {meta && <p className="mt-2 text-xs text-navy-600">{meta}</p>}
        {artisan.about && <p className="mt-3 line-clamp-3 text-xs text-navy-600">{artisan.about}</p>}
        <p className="mt-3 text-xs text-navy-600">
          {artisan.products} {artisan.products === 1 ? 'product' : 'products'}
        </p>
        <Link
          href={vendorStorefrontRoute(artisan.slug)}
          className="mt-auto inline-block pt-4 text-sm font-semibold text-navy-800 hover:text-gold-600"
        >
          View Store &rarr;
        </Link>
      </div>
    </div>
  );
}