import { Button, Popover, PopoverContent, PopoverTrigger } from '@pac/web';

export const FilterPopover = () => (
  <div className="flex h-[240px] items-start justify-center p-2">
    <Popover defaultOpen>
      <PopoverTrigger asChild><Button variant="outline" size="sm">画像标签</Button></PopoverTrigger>
      <PopoverContent className="w-56">
        <p className="mb-2 text-xs font-medium text-slate-500">按画像圈人</p>
        <div className="flex flex-wrap gap-1.5 text-xs">
          <span className="rounded-full border border-teal-300 bg-teal-50 px-2 py-0.5 text-teal-700">重要价值</span>
          <span className="rounded-full border border-slate-200 px-2 py-0.5 text-slate-600">种植意向</span>
          <span className="rounded-full border border-slate-200 px-2 py-0.5 text-slate-600">近一年到诊</span>
        </div>
      </PopoverContent>
    </Popover>
  </div>
);
