"use client";

import { ArrowUpRight, Award, Check, CircleHelp } from "lucide-react";

export default function BoardCard({ board }) {
	const mainFields = ["Nome", "Link", "Imagem", "Loja Oficial"];

	const technicalFields = Object.keys(board).filter((key) => !mainFields.includes(key) && board[key]);

	const valor = (campo) => board[campo]?.toString().toLowerCase().trim();
	const recursos = technicalFields.filter((campo) => ["sim", "opcional"].includes(valor(campo)));
	const lojaOficial = valor("Loja Oficial") === "sim";

	return (
		<article className="card card-interactive flex h-full flex-col overflow-hidden">
			{board.Imagem && (
				<div
					className="flex shrink-0 justify-center border-b border-line bg-surface-2 p-4 [&_img]:h-44 [&_img]:w-auto [&_img]:max-w-full [&_img]:object-contain"
					dangerouslySetInnerHTML={{ __html: board.Imagem }}
				/>
			)}

			<div className="flex grow flex-col p-5">
				{lojaOficial && (
					<span className="chip chip-accent mb-3 w-fit">
						<Award className="h-3.5 w-3.5" aria-hidden="true" />
						Loja oficial
					</span>
				)}

				<h3 className="line-clamp-2 font-display text-lg font-semibold leading-snug tracking-[-0.02em] text-ink">
					{board.Nome || "Placa genérica"}
				</h3>

				{recursos.length > 0 && (
					<div className="mt-4">
						<p className="text-xs font-medium text-muted">Recursos embarcados</p>
						<ul className="mt-2 flex flex-wrap gap-1.5">
							{recursos.map((campo) => {
								const opcional = valor(campo) === "opcional";
								return (
									<li key={campo} className={`chip ${opcional ? "text-gold" : "text-ink-soft"}`}>
										{opcional ? (
											<CircleHelp className="h-3 w-3 text-gold" aria-hidden="true" />
										) : (
											<Check className="h-3 w-3 text-ok" aria-hidden="true" />
										)}
										{campo}
										{opcional && <span className="sr-only"> (opcional)</span>}
									</li>
								);
							})}
						</ul>
					</div>
				)}

				{board.Link && (
					<a href={board.Link} target="_blank" rel="noopener noreferrer" className="btn btn-primary mt-6 w-full">
						Ver no AliExpress
						<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
						<span className="sr-only"> (abre em nova aba)</span>
					</a>
				)}
			</div>
		</article>
	);
}