import { Chip, SidebarCard } from '@pac/web';

export const InfoCard = () => (
  <div className="w-[300px] p-2">
    <SidebarCard
      title="画像标签"
      meta="11 项"
      action={<button className="text-[10.5px] text-teal-700 hover:underline">详情 →</button>}
    >
      <p className="text-[12.5px] leading-relaxed text-slate-700">
        重要价值新客且为银行私行权益客户,有种植、修复、拔牙及补牙四项应治未治项目待跟进。
      </p>
      <div className="mt-2 flex flex-wrap gap-1.5">
        <Chip tone="teal" size="xs">重要价值</Chip>
        <Chip tone="rose" size="xs">应治未治</Chip>
      </div>
    </SidebarCard>
  </div>
);

export const Collapsed = () => (
  <div className="w-[300px] p-2">
    <SidebarCard title="治疗历史" meta="6 项" defaultOpen={false}>
      <p className="text-sm">折叠时不可见的内容。</p>
    </SidebarCard>
  </div>
);
