import { type Meta } from '@storybook/react';
import { HelpCircle } from 'lucide-react';
import React from 'react';
import { DialogTrigger } from 'react-aria-components/Dialog';
import { Heading } from 'react-aria-components/Heading';
import { Button } from '../src/Button';
import { Dialog } from '../src/Dialog';
import { Popover } from '../src/Popover';

const meta: Meta<typeof Popover> = {
  component: Popover,
  parameters: {
    layout: 'centered'
  },
  tags: ['autodocs'],
  args: {
    showArrow: true
  }
};

export default meta;

export const Example = (args: any) => (
  <DialogTrigger>
    <Button variant="secondary" aria-label="Help"><HelpCircle className="w-4 h-4" /></Button>
    <Popover {...args} className="max-w-[250px]">
      <Dialog>
        <Heading slot="title" className="text-lg font-semibold mb-2">Help</Heading>
        <p className="text-sm">For help accessing your account, please contact support.</p>
      </Dialog>
    </Popover>
  </DialogTrigger>
);
