import Button from "@/components/Button";
import ProduitsCarousel, { type Format } from "@/components/home/ProduitsCarousel";
import { IconSac } from "@/components/icons";
import { getProduits } from "@/lib/api/produits";
import styles from "./NosSacsApercu.module.css";

// Repli si le backend est injoignable, pour ne jamais casser la page d'accueil.
const FORMATS_REPLI: Format[] = [
  {
    id: -1,
    nom: "Sac sans manche",
    dimensions: "330 x 178 x 110 mm",
    description: "Idéal pour les petits commerces, pharmacies, boulangeries.",
    imageUrl: null,
  },
  {
    id: -2,
    nom: "Sac avec manche",
    dimensions: "440 x 225 x 300 mm",
    description: "Parfait pour les supermarchés, boutiques et gros volumes.",
    imageUrl: null,
  },
];

async function chargerFormats(): Promise<Format[]> {
  try {
    const produits = await getProduits();
    if (produits.length === 0) return FORMATS_REPLI;
    return produits;
  } catch {
    return FORMATS_REPLI;
  }
}

export default async function NosSacsApercu() {
  const formats = await chargerFormats();

  return (
    <section className={styles.section}>
      <div className={styles.inner}>
        <h2 className={styles.titre}>Nos sacs</h2>
        <p className={styles.sousTitre}>
          Deux formats, un configurateur 3D pour visualiser votre design avant commande.
        </p>

        <ProduitsCarousel formats={formats} />

        <Button href="/nos-sacs" size="lg" className={styles.cta} icone={<IconSac />}>
          Configurer mes sacs
        </Button>
      </div>
    </section>
  );
}