import Image from "next/image";
import Link from "next/link";
import type { Producer } from "@/data/home";
import styles from "./ProducerCard.module.css";

export default function ProducerCard({ producer }: { producer: Producer }) {
  const typeIcon =
    producer.typeIcon === "cart"
      ? "/images/icons/cart.svg"
      : "/images/icons/gear.svg";

  return (
    <article className={styles.card}>
      <Link href={`/businesses/${producer.slug}`} className={styles.link}>
        <div className={styles.coverWrap}>
          <Image
            src={producer.cover}
            alt=""
            fill
            className={styles.cover}
            sizes="(max-width: 720px) 100vw, (max-width: 1100px) 50vw, 430px"
          />
        </div>
        <div className={styles.body}>
          <div className={`tile-hover ${styles.info}`}>
            <div className={styles.identity}>
              <img
                className={`${styles.logo} ${producer.logoClass ? styles[producer.logoClass] : ""}`}
                src={producer.logo}
                alt=""
                width={40}
                height={33}
              />
              <div>
                <h3 className={styles.name}>{producer.name}</h3>
                <p className={styles.tagline}>{producer.tagline}</p>
              </div>
            </div>
            <div className={styles.meta}>
              <p className={styles.products}>
                <strong>{producer.products} </strong>
                Products
              </p>
              <span className={styles.divider} />
              <p className={styles.since}>
                Since <strong>{producer.since}</strong>
              </p>
            </div>
          </div>
          <p className={styles.description}>{producer.description}</p>
          <div className={styles.rule} />
          <div className={styles.tags}>
            <span className={styles.tag}>
              <img src={typeIcon} alt="" width={15} height={15} />
              {producer.typeLabel}
            </span>
            <span className={styles.tag}>
              <img src="/images/icons/home-outline.svg" alt="" width={16} height={16} />
              {producer.category}
            </span>
          </div>
        </div>
      </Link>
    </article>
  );
}