import { Popover, PopoverContent, PopoverTrigger } from "./popover";

export default function PopoverDemo() {
  return (
    <div className="flex items-center justify-center p-8">
      <Popover>
        <PopoverTrigger className="inline-flex items-center justify-center rounded-base border-2 border-border bg-main px-4 py-2 text-sm font-base text-main-foreground shadow-shadow hover:translate-x-boxShadowX hover:translate-y-boxShadowY hover:shadow-none">
          Open Popover
        </PopoverTrigger>
        <PopoverContent className="w-72">
          <div className="space-y-2">
            <h4 className="font-heading text-sm">Dimensions</h4>
            <p className="text-sm font-base text-muted-foreground">
              Set the dimensions for the layer.
            </p>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  );
}