Card

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

{
  /* 기본 — 헤더 + 콘텐츠 + 푸터 */
}
<Card>
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>회의 알림 설정을 관리합니다.</CardDescription>
    <CardAction>
      <Button variant="ghost" size="icon" aria-label="설정">
        <Settings size={16} />
      </Button>
    </CardAction>
  </CardHeader>
  <CardContent>{/* 콘텐츠 */}</CardContent>
  <CardFooter className="border-t border-stone-100">
    <Button size="sm">저장</Button>
  </CardFooter>
</Card>;

{
  /* muted */
}
<Card className="bg-stone-50">
  <CardContent>
    <CardTitle>Usage</CardTitle>
    <CardDescription>503 minutes · Unlimited</CardDescription>
  </CardContent>
</Card>;

{
  /* info block */
}
<CardInfoBlock>
  <h4 className="flex items-center gap-2 typography-label1NormalMedium text-tds-stone-800">
    <UserMinus className="h-4 w-4 text-tds-stone-400" />
    What happens after removal
  </h4>
  <ul className="list-disc space-y-2 pl-5 typography-body2NormalRegular text-tds-stone-600">
    <li>The member is immediately removed from the team plan.</li>
    <li>No further subscription fees will be charged.</li>
  </ul>
</CardInfoBlock>;

{
  /* featured */
}
<Card className="rounded-3xl py-8">
  <CardContent className="px-8">
    <CardTitle className="title3SemiBold mb-1">Basic</CardTitle>
    <CardDescription>Free · 9 team members</CardDescription>
  </CardContent>
</Card>;

{
  /* gallery */
}
<Card className="rounded-2xl p-0 gap-0 overflow-hidden cursor-pointer hover:bg-stone-50 transition-colors">
  <CardContent className="p-0">
    <div className="flex h-24 items-center justify-center bg-stone-50 border-b border-stone-100">
      <FileText size={18} className="text-stone-400" />
    </div>
  </CardContent>
  <CardContent className="px-4 pt-3 pb-2">
    <CardTitle>Meeting Minutes</CardTitle>
    <CardDescription>회의록을 자동으로 정리합니다.</CardDescription>
  </CardContent>
  <CardFooter className="px-4 pb-3 caption1Regular text-stone-400 justify-between">
    <span>Tiro</span>
    <span>50</span>
  </CardFooter>
</Card>;

{
  /* selectable — RadioGroup 결합 */
}
<RadioGroup
  value={mode}
  onValueChange={setMode}
  className="grid grid-cols-2 gap-3"
>
  {options.map((opt) => (
    <RadioGroup.Item key={opt.value} value={opt.value} asChild>
      <Card
        className={cn(
          "rounded-2xl cursor-pointer py-5 transition-colors",
          mode === opt.value
            ? "border-stone-300 bg-stone-50"
            : "border-stone-100 bg-white hover:bg-stone-50",
        )}
      >
        <CardContent>
          <CardTitle>{opt.title}</CardTitle>
          <CardDescription>{opt.desc}</CardDescription>
        </CardContent>
      </Card>
    </RadioGroup.Item>
  ))}
</RadioGroup>;