Popover

import { Popover, PopoverTrigger, PopoverContent, Button } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';
import { HeroSpecimen } from '../_components/HeroSpecimen';

export default function PopoverSnapshot() {
  return (
    <VariantGrid
      title="Popover"
      // Gallery thumbnail: a static, non-portaled mock of the open popover (the
      // real PopoverContent portals to document.body and would leak onto the
      // detail page from the hidden hero wrapper). The variant below stays closed
      // — the interactive preview opens the real popover on click.
      hero={
        <HeroSpecimen className="max-w-[200px]">
          <div className="flex flex-col items-center gap-2">
            <span className="bg-button-primary-bg text-button-primary-text rounded-md px-3 py-1.5 text-sm font-medium">
              Open popover
            </span>
            <div className="border-stroke bg-surface shadow-overlay w-full rounded-lg border p-2.5 text-left">
              <p className="text-ink-1 text-sm font-semibold">Floating panel</p>
              <p className="text-ink-2 text-xs">Surface, stroke, overlay shadow.</p>
            </div>
          </div>
        </HeroSpecimen>
      }
      variants={[
        {
          label: 'trigger',
          node: (
            <Popover>
              <PopoverTrigger asChild>
                <Button>Open popover</Button>
              </PopoverTrigger>
              <PopoverContent>
                <div className="flex flex-col gap-2 p-1 text-sm">
                  <p className="text-ink-1 font-semibold">Floating panel</p>
                  <p className="text-ink-2">Tokens: surface, stroke, overlay shadow.</p>
                </div>
              </PopoverContent>
            </Popover>
          ),
        },
      ]}
    />
  );
}