import TagItem from '.'
import { Meta, StoryObj } from '@storybook/react-vite'

export default {
  title: 'react/TagItem',
  component: TagItem,
  parameters: {
    layout: 'centered',
  },
} as Meta<typeof TagItem>

export const Default: StoryObj<typeof TagItem> = {
  args: {
    label: '#女の子',
  },
  render: function Render(args) {
    return <TagItem {...args} />
  },
}

export const TranslatedLabel: StoryObj<typeof TagItem> = {
  render: function Render() {
    return <TagItem label="#女の子" translatedLabel="girl" />
  },
}

export const BGColor: StoryObj<typeof TagItem> = {
  render: function Render() {
    return <TagItem label="女の子" bgColor="var(--charcoal-brand)" />
  },
}

export const BGImage: StoryObj<typeof TagItem> = {
  render: function Render() {
    return (
      <TagItem
        label="#女の子"
        bgImage="data:image/png;base64,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"
      />
    )
  },
}

export const Active: StoryObj<typeof TagItem> = {
  render: function Render() {
    return <TagItem label="#女の子" status="active" />
  },
}

export const InActive: StoryObj<typeof TagItem> = {
  render: function Render() {
    return <TagItem label="#女の子" status="inactive" />
  },
}

export const Small: StoryObj<typeof TagItem> = {
  render: function Render() {
    return <TagItem label="#女の子" size="S" />
  },
}

export const Disabled: StoryObj<typeof TagItem> = {
  render: function Render() {
    return <TagItem label="#女の子" disabled />
  },
}