import type { Meta, StoryObj } from '@storybook/react'
import { BadgeStatus, CountBadge, DotLabel, FeatureTag, NotificationDot } from './Badge'

const meta: Meta = {
  title: 'Components/Badge',
  parameters: { layout: 'centered' },
}
export default meta

export const StatusBadges: StoryObj = {
  render: () => (
    <div className="flex gap-2 flex-wrap">
      <BadgeStatus status="active">활성</BadgeStatus>
      <BadgeStatus status="in-progress">진행 중</BadgeStatus>
      <BadgeStatus status="pending">대기</BadgeStatus>
      <BadgeStatus status="error">오류</BadgeStatus>
      <BadgeStatus status="inactive">비활성</BadgeStatus>
    </div>
  ),
}

export const DotLabels: StoryObj = {
  render: () => (
    <div className="flex gap-4 flex-wrap">
      <DotLabel color="bg-teal-500">텍스트 생성</DotLabel>
      <DotLabel color="bg-amber-500">이미지 처리</DotLabel>
      <DotLabel color="bg-green-500">데이터 분석</DotLabel>
    </div>
  ),
}

export const CountBadges: StoryObj = {
  render: () => (
    <div className="flex gap-4 items-center">
      <CountBadge value={3} variant="red" />
      <CountBadge value={24} variant="teal" size="md" />
      <CountBadge value={9} variant="default" />
    </div>
  ),
}

export const Tags: StoryObj = {
  render: () => (
    <div className="flex gap-1.5">
      <FeatureTag>GPT-4</FeatureTag>
      <FeatureTag>텍스트</FeatureTag>
      <FeatureTag>한국어</FeatureTag>
    </div>
  ),
}

export const NotificationDots: StoryObj = {
  render: () => (
    <div className="flex gap-6 items-center">
      <div className="relative inline-flex">
        <span className="material-symbols-outlined text-slate-400">notifications</span>
        <NotificationDot variant="red" />
      </div>
      <div className="relative inline-flex">
        <span className="material-symbols-outlined text-slate-400">notifications</span>
        <NotificationDot variant="teal" />
      </div>
    </div>
  ),
}