"use client" import * as React from "react" import { motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" export type AnimatedToggleCardItem = { value: string title: string description?: string icon?: React.ReactNode tone?: "default" | "success" | "warning" | "destructive" } export function AnimatedToggleCard({ items, value, onValueChange, className, }: { items: AnimatedToggleCardItem[] value: string onValueChange: (value: string) => void className?: string }) { const reduceMotion = useReducedMotion() return (

{items.map((item) => { const selected = item.value === value const tone = item.tone ?? "default" const toneClassName = tone === "success" ? "data-[selected=true]:border-emerald-500/40 data-[selected=true]:text-emerald-950 dark:data-[selected=true]:text-emerald-100" : tone === "warning" ? "data-[selected=true]:border-amber-500/45 data-[selected=true]:text-amber-950 dark:data-[selected=true]:text-amber-100" : tone === "destructive" ? "data-[selected=true]:border-destructive/45 data-[selected=true]:text-destructive" : "data-[selected=true]:border-primary" const activeClassName = tone === "success" ? "bg-emerald-500/10" : tone === "warning" ? "bg-amber-500/10" : tone === "destructive" ? "bg-destructive/10" : "bg-primary/8" return ( ) })}

) }