import type { Meta, StoryObj } from '@storybook/react';
import { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';
import { Button } from '../button';
import { Avatar, AvatarFallback, AvatarImage } from '../avatar';
import { CalendarDays } from 'lucide-react';
import React from 'react';

const meta: Meta<typeof HoverCard> = {
  title: 'UI/HoverCard',
  component: HoverCard,
  render: args => <HoverCard {...args} />,
  argTypes: {
    open: {
      control: 'boolean',
      description: 'Whether the hover card is open.',
    },
    openDelay: {
      control: { type: 'number', min: 0, max: 1000, step: 100 },
      description:
        'The duration from when the mouse hovers over the trigger until the hover card opens.',
      defaultValue: 700,
    },
    closeDelay: {
      control: { type: 'number', min: 0, max: 1000, step: 100 },
      description:
        'The duration from when the mouse leaves the trigger until the hover card closes.',
      defaultValue: 300,
    },
  },
};

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

export const Default: Story = {
  render: args => (
    <div className="flex justify-center p-20">
      <HoverCard {...args}>
        <HoverCardTrigger asChild>
          <Button variant="link">@nextjs</Button>
        </HoverCardTrigger>
        <HoverCardContent className="w-80">
          <div className="flex justify-between space-x-4">
            <Avatar>
              <AvatarImage src="https://github.com/vercel.png" />
              <AvatarFallback>VC</AvatarFallback>
            </Avatar>
            <div className="space-y-1">
              <h4 className="text-sm font-semibold">@nextjs</h4>
              <p className="text-sm">The React Framework – created and maintained by @vercel.</p>
              <div className="flex items-center pt-2">
                <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{' '}
                <span className="text-xs text-muted-foreground">Joined December 2021</span>
              </div>
            </div>
          </div>
        </HoverCardContent>
      </HoverCard>
    </div>
  ),
};