import SegmentationTable from '../SegmentationTable';

import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';

export const argTypes = {
  component: SegmentationTable,
  title: 'Components/SegmentationTable',
};

<Meta title="Components/SegmentationTable" component={SegmentationTable} />

export const SegmentationTableTemplate = args => (
  <div className="w-64 h-96 bg-primary-dark">
    <SegmentationTable {...args} />
  </div>
);

<Heading
  title="SegmentationTable"
  componentRelativePath="SegmentationTable/SegmentationTable.tsx"
/>

- [Overview](#overview)
- [Props](#props)
- [Contribute](#contribute)

## Overview

SegmentationTable is a component that renders the SegmentationTables.

<Canvas>
  <Story
    name="Overview"
    args={{
      title: 'Segmentations',
    }}
  >
    {SegmentationTableTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={SegmentationTable} />

## Usage

<Canvas>
  <Story
    name="With Data"
    args={{
      title: 'Segmentations',
      amount: 1,
      activeSegmentationId: 'ptScene-labelmap-0',
      segmentations: [
        {
          id: 'ptScene-labelmap-0',
          label: 'ptScene-labelmap-0',
          displayText: ['SUV Peak: 25.58'],
        },
      ],
    }}
  >
    {SegmentationTableTemplate.bind({})}
  </Story>
</Canvas>

## Contribute

<Footer componentRelativePath="SegmentationTable/__stories__/segmentationTable.stories.mdx" />
