import { Card, Dropdown } from '@/components';
import { COLLECTION_CARD } from '@/stories/cards/Cards.data';
import { classNames } from '@/utils/classNames';

export type TCardCollectionProps = {
  img: string;
  title: string;
};

export function CardCollection() {
  return (
    <Card theme={'light'} className="w-[280px]" isLink={true}>
      <a href={'/collection'} className={classNames('absolute w-full h-full z-10')} />
      <Card.Content className="h-[280px]">
        <img src={COLLECTION_CARD.file} alt={COLLECTION_CARD.name} className="absolute" />
      </Card.Content>
      <Card.Footer>
        <Card.Title title={COLLECTION_CARD.name} className="mb-[1px]" />
        <div className="flex w-full justify-between">
          <Card.Description description={'54 items'} />
          <Dropdown menuPosition="bottom" toggler={<Dropdown.Button dotsSize={'sm'} />}>
            {COLLECTION_CARD.dropdownData.map((option, key) => (
              <Dropdown.Item key={key} option={option} closeOnClick={true} />
            ))}
          </Dropdown>
        </div>
      </Card.Footer>
    </Card>
  );
}