import type { Meta, StoryObj } from '@storybook/react';
import { ThemeToggle } from './theme-toggle';

/**
 * EN: ThemeToggle component stories
 * VI: Stories cho component ThemeToggle
 */
const meta: Meta<typeof ThemeToggle> = {
  title: 'Components/ThemeToggle',
  component: ThemeToggle,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'EN: A button component that toggles between light and dark themes. / VI: Component nút chuyển đổi giữa theme sáng và tối.',
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {},
};

export default meta;
type Story = StoryObj<typeof ThemeToggle>;

/**
 * EN: Default theme toggle button
 * VI: Nút chuyển đổi theme mặc định
 */
export const Default: Story = {
  render: () => <ThemeToggle />,
};

/**
 * EN: Theme toggle in different contexts
 * VI: Chuyển đổi theme trong các ngữ cảnh khác nhau
 */
export const InHeader: Story = {
  render: () => (
    <div className="flex items-center justify-between p-4 bg-secondary rounded-lg border border-primary">
      <span className="text-primary font-medium">Header / Tiêu đề</span>
      <ThemeToggle />
    </div>
  ),
};

/**
 * EN: Theme toggle in sidebar
 * VI: Chuyển đổi theme trong sidebar
 */
export const InSidebar: Story = {
  render: () => (
    <div className="flex flex-col gap-4 p-4 bg-secondary rounded-lg border border-primary w-64">
      <div className="text-primary font-semibold">Sidebar / Thanh bên</div>
      <div className="flex items-center justify-between">
        <span className="text-secondary text-sm">Theme / Giao diện</span>
        <ThemeToggle />
      </div>
    </div>
  ),
};