"use client";

import clsx from "clsx";

import { IRefillModalsProduct } from "@/services/socket/events";

import RefillOption from "../RefillOption/RefillOption";

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

interface RefillOptionsProps {
  options: IRefillModalsProduct[];
  selectedOption?: IRefillModalsProduct;
  onChange?: (selected: IRefillModalsProduct) => void;
  className?: string;
}

export default function RefillOptions({
  options,
  selectedOption,
  onChange,
  className,
}: RefillOptionsProps) {
  const handleSelect = (option: IRefillModalsProduct) => {
    onChange?.(option);
  };

  return (
    <div className={clsx(styles.options, className)}>
      {options.map((option, idx) => (
        <RefillOption
          key={option.id}
          product={option}
          popular={idx === 1}
          selected={selectedOption?.id === option.id}
          onClick={() => handleSelect(option)}
        />
      ))}
    </div>
  );
}
