import { Card } from '@/components';
import { TDropdownOption } from '@/components/dropdown';
import { ATTRIBUTE } from '@/stories/cards/Cards.data';

type TCardImageAttributeProps = {
  options: TDropdownOption[];
};

export function CardImageAttribute({ options }: TCardImageAttributeProps) {
  return (
    <Card theme={'light'} className="w-[280px]">
      <Card.AttributeContent>
        <img src={ATTRIBUTE.file} alt="" />
      </Card.AttributeContent>
      <Card.FooterWithRange
        name={ATTRIBUTE.name}
        details={ATTRIBUTE.details}
        rangeAction={() => {}}
        showLockProp={true}
        maxRangeValue={1000}
        setTitleAction={() => {}}
        changePercentModeAction={() => {}}
        changeCardTitleAction={() => {}}
        changeLockModeAction={() => {}}
        options={options}
      />
    </Card>
  );
}