export default function CodeSample({ label, language, code, note }) {
	const lines = code.replace(/\n$/, "").split("\n");

	return (
		<figure className="min-w-0">
			<figcaption className="mb-2.5 flex flex-wrap items-center justify-between gap-2 px-1">
				<span className="text-xs font-semibold text-ink">{label}</span>
				<span className="font-mono text-[0.6875rem] text-muted">{language}</span>
			</figcaption>
			<div className="code-panel rounded-2xl shadow-[0_18px_40px_-24px_rgba(0,0,0,0.5)]">
				<pre>
					<code>
						{lines.map((line, index) => (
							<span key={`${index}-${line}`} className="flex">
								<span className="mr-4 w-6 shrink-0 select-none text-right text-[#7d8794]">{index + 1}</span>
								<span className="min-w-0 whitespace-pre text-[#e9eef4]">{line || " "}</span>
							</span>
						))}
					</code>
				</pre>
			</div>
			{note && <p className="mt-2.5 px-1 text-xs leading-relaxed text-muted">{note}</p>}
		</figure>
	);
}