"use client";

import { useState } from "react";

import styles from "./Offers.module.scss";

import { IOffer, Offer } from "..";

interface OffersProps {
  products: (Omit<IOffer, "productKey"> & { key: string })[];
}

export default function Offers({ products }: OffersProps) {
  const [activeOffer, setActiveOffer] = useState<string>(products[0].id);

  return (
    <div className={styles.container}>
      {products.map(product => (
        <Offer
          {...product}
          key={product.id}
          productKey={product.key}
          isActive={activeOffer === product.id}
          onClick={() => setActiveOffer(product.id)}
        />
      ))}
    </div>
  );
}