/* eslint-disable react-hooks/rules-of-hooks */
import React, {ComponentProps, useState} from 'react';
import {Meta, StoryObj} from '@storybook/react';
import Slot from '@components/_HuGo/Slot';

import {SelectionCard} from './index';

type SelectionCardStoryArgs = ComponentProps<typeof SelectionCard>;

const meta: Meta<SelectionCardStoryArgs> = {
  title: 'HuGo/SelectionCard',
  component: SelectionCard,
  argTypes: {
    isSelected: {control: 'boolean'},
  },
  render: (args: SelectionCardStoryArgs) => {
    const [isSelected, setIsSelected] = useState(false);

    const onSelectCard = () => setIsSelected(prev => !prev);

    return (
      <SelectionCard {...args} isSelected={isSelected} onPress={onSelectCard}>
        <Slot />
      </SelectionCard>
    );
  },
};

type Story = StoryObj<SelectionCardStoryArgs>;

export const SelectionCardComponent: Story = {
  args: {
    isSelected: false,
  },
};

export default meta;