import type { Meta, StoryObj } from '@storybook/react'
import { EmptyCard, StatCard, ToolCard } from './Card'

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

export const Stat: StoryObj = {
  render: () => (
    <div className="grid grid-cols-2 gap-4 w-[600px]">
      <StatCard icon="bolt" label="활성 도구" value={12} change="+3" changeType="positive" progress={75} />
      <StatCard icon="analytics" iconGradient="green" label="이번 달 사용량" value="3,421건" change="+12%" changeType="positive" />
      <StatCard icon="warning" iconGradient="amber" label="오류 발생" value={2} change="-1" changeType="positive" />
      <StatCard icon="group" iconGradient="red" label="비활성 도구" value={5} change="0%" changeType="neutral" />
    </div>
  ),
}

export const Tool: StoryObj = {
  render: () => (
    <div className="grid grid-cols-2 gap-4 w-[600px]">
      <ToolCard
        icon="smart_toy"
        status="active"
        title="회의록 요약 도구"
        description="회의 녹취를 분석하여 핵심 논의사항을 자동 정리합니다."
        tags={['GPT-4', '텍스트', '한국어']}
      />
      <ToolCard
        icon="image"
        status="in-progress"
        title="이미지 분석기"
        description="업로드된 이미지에서 텍스트와 객체를 인식합니다."
        tags={['Vision', '이미지']}
      />
    </div>
  ),
}

export const Empty: StoryObj = {
  render: () => (
    <div className="w-[280px]">
      <EmptyCard
        icon="add"
        label="새 도구 등록"
        description="클릭하여 추가"
        onClick={() => alert('추가!')}
      />
    </div>
  ),
}