import { LazyLoadImage } from "react-lazy-load-image-component";
import "react-lazy-load-image-component/src/effects/blur.css";
import { createSlug } from "../helpers/slug";
import Link from "./Link";

export default function ManufactureCard({ data }) {
  const manufacture = data;
  return (
    <Link href={`/shop/brands/${createSlug(manufacture.name, manufacture.id)}`} className="flex justify-center items-center border border-gray-300 p-1 rounded h-16 text-gray-800 text-sm text-center bg-white">
      {manufacture.logo ? (
        <LazyLoadImage effect="blur" src={manufacture.logo} alt={manufacture.name || ''} className="w-full max-h-full object-contain object-center" />
      ) : manufacture.name}
    </Link>
  );
}