import Link from "next/link";
import type { StoreListItem } from "@/types/api";

export function StoreCard({ store }: { store: StoreListItem }) {
  return (
    <Link
      href={`/stores/${store.uuid}`}
      className="flex items-center gap-4 rounded-2xl border border-gray-300 bg-white p-4 shadow-sm"
    >
      <div className="h-24 w-24 shrink-0 overflow-hidden rounded-2xl bg-muted">
        {store.logo_url && (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={store.logo_url} alt={store.name} className="h-full w-full object-cover" />
        )}
      </div>
      <div className="flex flex-1 flex-col gap-2">
        <h3 className="text-[18px] font-bold leading-6 text-foreground">{store.name}</h3>
        <span className="w-fit rounded-full bg-gray-100 px-3 py-1 text-label text-gray-600">{store.category.name}</span>
      </div>
    </Link>
  );
}