import { InfoCircle } from "@properui/icons";
import { Button } from "../buttons/button";
import { ButtonUtility } from "../buttons/button-utility";
import { Popover } from "./popover";

export const Placements = () => (
    <div className="flex flex-wrap items-center gap-6">
        <Popover
            trigger={
                <Button color="secondary" size="sm">
                    Top
                </Button>
            }
            placement="top"
            aria-label="Top placement"
        >
            <p className="text-secondary w-48 text-sm">Positioned above the trigger.</p>
        </Popover>
        <Popover
            trigger={
                <Button color="secondary" size="sm">
                    Right
                </Button>
            }
            placement="right"
            aria-label="Right placement"
        >
            <p className="text-secondary w-48 text-sm">Positioned to the right of the trigger.</p>
        </Popover>
        <Popover
            trigger={
                <Button color="secondary" size="sm">
                    Bottom
                </Button>
            }
            placement="bottom"
            aria-label="Bottom placement"
        >
            <p className="text-secondary w-48 text-sm">Positioned below the trigger.</p>
        </Popover>
        <Popover
            trigger={
                <Button color="secondary" size="sm">
                    Left
                </Button>
            }
            placement="left"
            aria-label="Left placement"
        >
            <p className="text-secondary w-48 text-sm">Positioned to the left of the trigger.</p>
        </Popover>
    </div>
);
Popover components
