import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { createGroups } from '../../helpers/storybook';
import { DateTimePicker } from './DateTimePicker';

const groups = createGroups({
  Content: ['value'],
  Behavior: ['showTimePicker', 'showSeconds', 'hours12', 'onSelected'],
  Styling: ['className', 'style'],
});

const meta: Meta<typeof DateTimePicker> = {
  title: 'Other Components/DateTimePicker',
  component: DateTimePicker,
  argTypes: {
    ...groups,
  },
};
export default meta;

export const Default: StoryObj<typeof DateTimePicker> = {
  decorators: [
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    (Story) => (
      <div
        style={{
          width: '100%',
          height: '100vh',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Story />
      </div>
    ),
  ],
};
