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

function isRemoteSrc(src: string) {
  return src.startsWith("http://") || src.startsWith("https://");
}

export default function ProducerCard({ producer }: { producer: Producer }) {
  return (
    <article className={styles.card}>
      <Link href={`/businesses/${producer.slug}`} className={styles.link}>
        <div className={styles.coverWrap}>
          {isRemoteSrc(producer.cover) ? (
            <img
              src={producer.cover}
              alt=""
              className={styles.cover}
            />
          ) : (
            <Image
              src={producer.cover}
              alt=""
              fill
              className={styles.cover}
              sizes="(max-width: 720px) 100vw, (max-width: 1100px) 50vw, 430px"
            />
          )}
        </div>
        <div className={`tile-hover ${styles.body}`}>
          <div className={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>
                {producer.tagline ? (
                  <p className={styles.tagline}>{producer.tagline}</p>
                ) : null}
              </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>
          {producer.description ? (
            <p className={styles.description}>{producer.description}</p>
          ) : null}
          <div className={styles.rule} />
          <div className={styles.footerRow}>
            <span className={styles.tag}>{producer.category}</span>
            <img
              className={styles.rowArrow}
              src="/images/icons/chevron.svg"
              alt=""
              width={8}
              height={14}
            />
          </div>
        </div>
      </Link>
    </article>
  );
}