import { Story, Meta } from '@storybook/react';
import { useState } from 'react';
import { CollapseButton } from '../../components/CollapseButton';
import type { CollapseButtonProps } from '../../components/CollapseButton';

export default {
  component: CollapseButton,
  title: 'Data Grid/In Cells/Open\\Close Row'
} as Meta;

const Template: Story<CollapseButtonProps> = (args) => {
  const [open, setOpen] = useState(args.open);
  const handleClick = () => setOpen(!open);

  return (
    <div>
      <CollapseButton onClick={handleClick} open={open} />
      <CollapseButton onClick={handleClick} open={!open} />
    </div>
  );
};

export const Primary = Template.bind({});
Primary.args = {
  open: true
};