import type { CSSProperties } from "react";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import type { CaseStudy } from "@/app/lib/data/case-studies";
import styles from "./CaseStudyCard.module.css";

/** How many stack chips a card shows before it stops listing them. */
const STACK_PREVIEW = 6;

export function CaseStudyCard({ study }: { study: CaseStudy }) {
  const themedStyle: CSSProperties = {
    ["--accent-start" as string]: study.accentStart,
    ["--accent-end" as string]: study.accentEnd,
  };

  const shown = study.stack.slice(0, STACK_PREVIEW);
  const remaining = study.stack.length - shown.length;

  return (
    <Link href={`/case-studies/${study.slug}`} className={styles.card} style={themedStyle}>
      <div className={styles.head}>
        <h3 className={styles.client}>{study.client}</h3>
        <span className={styles.sector}>{study.sector}</span>
      </div>

      <p className={styles.headline}>{study.headline}</p>
      <p className={styles.summary}>{study.summary}</p>

      <ul className={styles.stack}>
        {shown.map((item) => (
          <li key={item} className={styles.stackItem}>
            {item}
          </li>
        ))}
        {remaining > 0 && <li className={styles.stackItem}>+{remaining} more</li>}
      </ul>

      <div className={styles.foot}>
        <span className={styles.period}>{study.period}</span>
        <span className={styles.readMore}>
          Read the case study <ArrowRight size={16} />
        </span>
      </div>
    </Link>
  );
}