import { useState } from 'react'
import VariantCard from './VariantCard'

const VariantGroupCard = ({ variants, ...props }) => {
  const [showAll, setShowAll] = useState(false)
  const variantsToShow = showAll ? variants : variants.slice(0, 2)

  return (
    <>
      {variantsToShow?.map((variant, index) => (
        <VariantCard
          key={index}
          product={variant}
          {...props}
        />
      ))}
      {variants.length > 2 && (
        <button
          type='button'
          className='btn-light py-2 w-full'
          onClick={() => setShowAll(!showAll)}
        >
          {!showAll ? `Lihat Semua +${variants.length - variantsToShow.length}` : 'Tutup'}
        </button>
      )}
    </>
  )
}

export default VariantGroupCard