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

export default function HoverCardDemo() {
  return (
    <div className="flex items-center justify-center p-8">
      <HoverCard>
        <HoverCardTrigger 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">
          Hover me
        </HoverCardTrigger>
        <HoverCardContent className="w-64">
          <div className="space-y-1">
            <h4 className="text-sm font-heading">@shadcn</h4>
            <p className="text-sm font-base">
              The React Framework – created and maintained by @vercel.
            </p>
          </div>
        </HoverCardContent>
      </HoverCard>
    </div>
  );
}