import type { Meta, StoryObj } from '@storybook/react';
import { Avatar, AvatarImage, AvatarFallback } from './avatar';
import { User } from 'lucide-react';
import React from 'react';

type AvatarStoryProps = React.ComponentProps<typeof Avatar> & {
  src?: string;
  fallback?: string;
};

const meta: Meta<AvatarStoryProps> = {
  title: 'UI/Avatar',
  component: Avatar,
  render: args => <Avatar {...args} />,
  argTypes: {
    size: {
      control: 'select',
      options: ['xs', 'sm', 'md', 'lg', 'xl'],
      description: 'Size of the avatar.',
      defaultValue: 'md',
    },
    src: {
      control: 'text',
      description: 'The source URL of the avatar image.',
      defaultValue: 'https://github.com/shadcn.png',
    },
    fallback: {
      control: 'text',
      description: 'The fallback text to display if the image fails to load.',
      defaultValue: 'CN',
    },
  },
};

export default meta;
type Story = StoryObj<AvatarStoryProps>;

export const Default: Story = {
  args: {
    size: 'md',
    src: 'https://github.com/shadcn.png',
    fallback: 'CN',
  },
  render: ({ src, fallback, ...args }) => (
    <Avatar {...args}>
      <AvatarImage src={src} alt="Avatar" />
      <AvatarFallback>{fallback}</AvatarFallback>
    </Avatar>
  ),
};

export const Small: Story = {
  render: () => (
    <Avatar size="sm">
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  ),
};

export const Large: Story = {
  render: () => (
    <Avatar size="lg">
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  ),
};

export const FallbackInitials: Story = {
  render: () => (
    <Avatar>
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  ),
};

export const FallbackIcon: Story = {
  render: () => (
    <Avatar>
      <AvatarFallback className="bg-primary/10 text-primary">
        <User className="size-5" />
      </AvatarFallback>
    </Avatar>
  ),
};