Popover

import { Popover } from '@kivora/react';

import { Popover, Button } from '@kivora/react';

function Example() {
  return (
    <Popover content={<div>Additional information here</div>}>
      <Button label="Show Info" />
    </Popover>
  );
}

<Popover content={<p>Appears below</p>} position="bottom">
  <Button label="Bottom" />
</Popover>

<Popover content={<p>Appears above</p>} position="top">
  <Button label="Top" />
</Popover>

<Popover content={<p>Appears on left</p>} position="left">
  <Button label="Left" />
</Popover>

<Popover content={<p>Appears on right</p>} position="right">
  <Button label="Right" />
</Popover>

{/* Fixed width in pixels */}
<Popover content={<p>Wide content area</p>} width={400}>
  <Button label="Wide Popover" />
</Popover>

{/* Match trigger width */}
<Popover content={<p>Same width as button</p>} width="target">
  <Button label="Matching Width" />
</Popover>

<Popover
  content={
    <div className="space-y-2">
      <h4 className="font-semibold">Quick Actions</h4>
      <div className="flex flex-col gap-1">
        <button className="text-left p-2 hover:bg-accent rounded">Edit</button>
        <button className="text-left p-2 hover:bg-accent rounded">Share</button>
        <button className="text-left p-2 hover:bg-accent rounded text-destructive">
          Delete
        </button>
      </div>
    </div>
  }
  width={200}
>
  <Button label="Actions" />
</Popover>

<Popover
  content={<p>Further away from trigger</p>}
  offset={16}
>
  <Button label="More Space" />
</Popover>

function ControlledPopover() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Popover
        content={
          <div>
            <p>Controlled popover</p>
            <button onClick={() => setIsOpen(false)}>Close</button>
          </div>
        }
        opened={isOpen}
        onOpen={() => setIsOpen(true)}
        onClose={() => setIsOpen(false)}
      >
        <Button label="Toggle" />
      </Popover>
      <Button
        label="External Close"
        onClick={() => setIsOpen(false)}
        className="ml-2"
      />
    </div>
  );
}

<Popover
  content={<p>Popover content</p>}
  defaultOpened={false}
  onOpen={() => console.log('Opened')}
  onClose={() => console.log('Closed')}
>
  <Button label="With Callbacks" />
</Popover>

<Popover
  content={
    <form>
      <input type="text" placeholder="Enter value" className="border p-2" />
      <Button label="Submit" className="mt-2" />
    </form>
  }
  closeOnClickOutside={false}
>
  <Button label="Form Popover" />
</Popover>

function UserPopover() {
  return (
    <Popover
      content={
        <div className="space-y-3">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-purple-500" />
            <div>
              <p className="font-semibold">John Doe</p>
              <p className="text-xs text-muted-foreground">@johndoe</p>
            </div>
          </div>
          <p className="text-sm">Product designer and developer based in San Francisco.</p>
          <div className="flex gap-2">
            <Button label="Follow" size="sm" />
            <Button label="Message" size="sm" variant="outline" />
          </div>
        </div>
      }
      width={280}
      position="bottom"
    >
      <button className="flex items-center gap-2 hover:bg-accent p-2 rounded">
        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-500" />
        <span className="text-sm font-medium">John Doe</span>
      </button>
    </Popover>
  );
}