import { CinePlayer } from '../../../components';
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';

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

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

export const CinePlayerTemplate = args => (
  <div className="relative h-96 w-96 bg-black">
    <div className="absolute left-1/2 bottom-3 -translate-x-1/2">
      <CinePlayer {...args} />
    </div>
  </div>
);

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

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

## Overview

CinePlayer is a component that allows you to use as a boolean value

<Canvas>
  <Story
    name="Overview"
    args={{
      isDynamic: true,
      dynamicInfo: {
        timePointIndex: 5,
        numTimePoints: 20,
        label: 'TemporalPositionIdentifier',
      },
    }}
  >
    {CinePlayerTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={CinePlayer} />

## Contribute

<Footer componentRelativePath="CinePlayer/__stories__/CinePlayer.stories.mdx" />
