import { Boxes, Palette, Smile } from 'lucide-react'; import PageTitle from '@/components/studio/PageTitle';
const libs=[[Boxes,'Material Library',['Zirconia HT','Lithium Disilicate','PMMA Provisional','CoCr Framework']],[Palette,'Shade Library',['VITA A1','VITA A2','VITA B1','Bleach 1']],[Smile,'Tooth Library',['Anatomic Natural','Soft Square','Youthful Oval','Digital Denture']]];
const Libraries=()=> <div className="p-4 pb-24 lg:p-6"><PageTitle eyebrow="Design resources" title="Digital Libraries" description="Curated material, shade and tooth-form references for planning workflows."/><div className="grid gap-4 lg:grid-cols-3">{libs.map(([Icon,title,items])=><section className="glass-panel p-5" key={title}><div className="flex items-center gap-3 text-sm text-white"><Icon className="h-5 w-5 text-cyan-400"/>{title}</div><div className="mt-5 space-y-2">{items.map(x=><button key={x} className="flex w-full items-center justify-between rounded-lg border border-white/[.05] px-3 py-3 text-left text-xs text-slate-400 hover:border-cyan-400/20 hover:text-white">{x}<span className="text-cyan-500">›</span></button>)}</div></section>)}</div></div>;
export default Libraries;