import MeasurementTable from '../MeasurementTable';

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

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

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

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

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

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

## Overview

MeasurementTable is a component that renders the MeasurementTables.

<Canvas>
  <Story
    name="Overview"
    args={{
      title: 'Measurements',
      servicesManager: {
        services: {
          customizationService: {
            getCustomization: (title, data) => data.content,
          },
        },
      },
    }}
  >
    {MeasurementTableTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={MeasurementTable} />

## Usage

With data

<Canvas>
  <Story
    name="With Data"
    args={{
      title: 'Measurements',
      amount: 1,
      data: [
        {
          id: 1,
          label: '(empty)',
          displayText: ['193.1 mm (S:6, I:5)'],
          isActive: false,
        },
      ],
      servicesManager: {
        services: {
          customizationService: {
            getCustomization: (title, data) => data,
          },
        },
      },
    }}
  >
    {MeasurementTableTemplate.bind({})}
  </Story>
</Canvas>

## Contribute

<Footer componentRelativePath="MeasurementTable/__stories__/measurementTable.stories.mdx" />
