import { useState } from "react";
import type { Product } from "../types";
import { tastingNotes } from "../data/copy";

interface FlavorSelectorProps {
  products: Product[];
}

export function FlavorSelector({ products }: FlavorSelectorProps) {
  const [selectedId, setSelectedId] = useState(products[0]?.id);
  const selected =
    products.find((product) => product.id === selectedId) ?? products[0];

  if (!selected) {
    return null;
  }

  return (
    <section className="flavors" id="flavors">
      <div className="section-heading">
        <h2>The seasonal three</h2>
        <p>One winter release. Choose a flavor to see it in full.</p>
      </div>

      <div className="flavor-options" aria-label="Seasonal flavors">
        {products.map((product) => {
          const isSelected = product.id === selected.id;
          return (
            <button
              key={product.id}
              type="button"
              aria-pressed={isSelected}
              className={`flavor-option${isSelected ? " flavor-option--selected" : ""}`}
              onClick={() => setSelectedId(product.id)}
            >
              <span className="flavor-option__image-wrap">
                <img src={product.image} alt="" className="flavor-option__image" />
              </span>
              <span className="flavor-option__name">{product.name}</span>
            </button>
          );
        })}
      </div>

      <div className="flavor-detail">
        <div className="flavor-detail__image-wrap">
          <img
            src={selected.image}
            alt={`Bottle of Fjora ${selected.name}, part of the Taste the North seasonal line.`}
            className="flavor-detail__image"
          />
        </div>
        <div className="flavor-detail__copy">
          <h3>{selected.name}</h3>
          <ul className="flavor-detail__botanicals">
            {selected.botanicals.map((botanical) => (
              <li key={botanical}>{botanical}</li>
            ))}
          </ul>
          <p className="flavor-detail__note">{tastingNotes[selected.id]}</p>
        </div>
      </div>
    </section>
  );
}