import { Meta, StoryObj } from '@storybook/react-vite'

import { HoverCard, HoverCardContent, HoverCardTrigger } from './card-hover'

const meta = {
  title: 'Hover Card',
  component: HoverCard,
  tags: ['autodocs'],
} satisfies Meta<typeof HoverCard>

export default meta

export const Default: StoryObj<typeof meta> = {
  parameters: {
    docs: {
      description: {
        story: 'The Hover Card component displays additional information when hovering over an element.',
      },
    },
  },
  render: () => (
    <div className="flex items-center justify-center">
      <HoverCard>
        <HoverCardTrigger>Hover</HoverCardTrigger>
        <HoverCardContent>The React Framework – created and maintained by @vercel.</HoverCardContent>
      </HoverCard>
    </div>
  ),
}
