import { Story } from '@storybook/react';
import React from 'react';
import Socials, { SocialsTypes } from '../components/Social/Socials';

const meta = {
  title: 'Components / Socials',
  component: Socials,
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const Template: Story<SocialsTypes> = (args) => <Socials {...args} />;

export const Default = Template.bind({});
Default.args = {
  items: [
    'facebook',
    'instagram',
    'twitter',
    'pinterest',
    'threads',
    'youtube',
    'tiktok',
  ],
};

export const Size = Template.bind({});
Size.args = {
  items: [
    'facebook',
    'instagram',
    'twitter',
    'pinterest',
    'threads',
    'youtube',
    'tiktok',
  ],
  size: 'text-xs',
};

export const Gap = Template.bind({});
Gap.args = {
  items: [
    'facebook',
    'instagram',
    'twitter',
    'pinterest',
    'threads',
    'youtube',
    'tiktok',
  ],
  size: 'text-xs',
  gap: 'gap-1',
};