Selection Card

import { SelectionCard, SelectionCardGroup } from '@/components/ui/selection-card'
import { Layout, Minimize2, Maximize2 } from 'lucide-react'

// Using SelectionCardGroup for automatic state management
<SelectionCardGroup
 value={selected}
 onChange={setSelected}
 label="Choose an option"
>
 <SelectionCard
 id="option-1"
 label="Option One"
 description="First option description"
 icon={<Layout className="w-5 h-5" />}
 />
 <SelectionCard
 id="option-2"
 label="Option Two"
 description="Second option description"
 icon={<Minimize2 className="w-5 h-5" />}
 />
</SelectionCardGroup>

// Individual cards with manual state
<SelectionCard
 id="single"
 label="Single Card"
 description="Manually controlled"
 selected={isSelected}
 onClick={(id) => setIsSelected(true)}
 activeBadge="Selected"
/>