import { Button } from '@pac/web';
import { PhoneCall, RefreshCw } from 'lucide-react';

export const Variants = () => (
  <div className="flex flex-wrap items-center gap-2 p-2">
    <Button>认领患者</Button>
    <Button variant="secondary">查看档案</Button>
    <Button variant="outline">新建预约</Button>
    <Button variant="ghost">取消</Button>
    <Button variant="destructive">放弃跟进</Button>
    <Button variant="link">查看全部</Button>
  </div>
);

export const Sizes = () => (
  <div className="flex flex-wrap items-center gap-2 p-2">
    <Button size="sm">小按钮</Button>
    <Button>默认</Button>
    <Button size="lg">大按钮</Button>
    <Button size="icon" aria-label="拨打"><PhoneCall className="h-4 w-4" /></Button>
  </div>
);

export const WithIcon = () => (
  <div className="flex flex-wrap items-center gap-2 p-2">
    <Button><PhoneCall className="h-4 w-4" /> 拨打电话</Button>
    <Button variant="outline"><RefreshCw className="h-4 w-4" /> 刷新数据</Button>
  </div>
);

export const Disabled = () => (
  <div className="flex flex-wrap items-center gap-2 p-2">
    <Button disabled>提交中…</Button>
    <Button variant="outline" disabled>不可用</Button>
  </div>
);
