import type { Meta, StoryObj } from '@storybook/react';
import { Empty, EmptyIcon, EmptyTitle, EmptyDescription, EmptyAction, EmptyImage } from './empty';
import { Button } from '../button';
import { Users, SearchX, FileX } from 'lucide-react';
import React from 'react';

type EmptyStoryProps = React.ComponentProps<typeof Empty> & {
  title?: string;
  description?: string;
  showAction?: boolean;
};

const meta: Meta<EmptyStoryProps> = {
  title: 'UI/Empty',
  component: Empty,
  render: args => <Empty {...args} />,
  argTypes: {
    title: {
      control: 'text',
      description: 'The title of the empty state.',
      defaultValue: 'No members yet',
    },
    description: {
      control: 'text',
      description: 'The description of the empty state.',
      defaultValue: 'Get started by adding your first team member to the workspace.',
    },
    showAction: {
      control: 'boolean',
      description: 'Whether to show the action button.',
      defaultValue: true,
    },
  },
};

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

export const Default: Story = {
  args: {
    title: 'No members yet',
    description: 'Get started by adding your first team member to the workspace.',
    showAction: true,
  },
  render: ({ title, description, showAction, ...args }) => (
    <Empty {...args}>
      <EmptyIcon>
        <Users className="size-10 text-muted-foreground" />
      </EmptyIcon>
      <EmptyTitle>{title}</EmptyTitle>
      <EmptyDescription>{description}</EmptyDescription>
      {showAction && (
        <EmptyAction>
          <Button>Add Member</Button>
        </EmptyAction>
      )}
    </Empty>
  ),
};

export const Compact: Story = {
  render: () => (
    <Empty className="min-h-[200px]">
      <EmptyIcon>
        <SearchX className="size-8 text-muted-foreground" />
      </EmptyIcon>
      <EmptyTitle>No results found</EmptyTitle>
      <EmptyDescription>Try adjusting your search filters.</EmptyDescription>
    </Empty>
  ),
};

export const WithImage: Story = {
  render: () => (
    <Empty>
      <EmptyImage
        src="https://illustrations.popsy.co/gray/success.svg"
        alt="Empty state"
        className="size-40 mb-4"
      />
      <EmptyTitle>All caught up!</EmptyTitle>
      <EmptyDescription>You have no pending tasks for today.</EmptyDescription>
    </Empty>
  ),
};