"use client"

import { CartProduct } from "@/modules/products/product"
import { useEffect, useState } from "react"

type Props = {
  product: CartProduct
}
const SingleProductColors = ({ product }: Props) => {
  const [selectColorId, setSelectColorId] = useState<number | null>(null)
  useEffect(() => {
    if (product?.product?.colors)
      setSelectColorId(product?.product?.colors?.[0]?.id)
  }, [product?.product?.id])

console.log("selectColorId",product)

  return (
    <div className="flex flex-wrap gap-2">
      {product?.product?.colors?.map((item) => (
        <button
          key={item?.id}
          onClick={() => setSelectColorId(item?.id)}
          className={`border mx-1 rounded-full flex items-center justify-center p-2 hover:scale-110 duration-200 w-10 h-10 ${
            item?.id === selectColorId && "border-red-400"
          }`}
        >
          <span
            className="w-6 h-6 rounded-full inline-block"
            style={{ background: item?.color_degree }}
          />
        </button>
      ))}
    </div>
  )
}

export default SingleProductColors