import Link from "next/link";

import { Card } from "@/components/card";
import { CmsImage } from "@/components/cms-image";

type PDADeviceCardProps = {
  brand: string;
  model: string;
  description: string;
  href: string;
  image?: string | null;
};

export function PDADeviceCard({ brand, model, description, href, image }: PDADeviceCardProps) {
  return (
    <Card className="h-full">
      {image ? (
        <CmsImage src={image} alt={model} className="mb-5 aspect-[4/3]" />
      ) : (
        <div className="mb-5 aspect-[4/3] rounded-lg border border-slate-200 bg-slate-50 p-4">
          <div className="flex h-full items-center justify-center rounded-md border border-dashed border-slate-300 text-sm font-semibold text-slate-500">
            PDA
          </div>
        </div>
      )}
      <p className="text-sm font-semibold text-primary">{brand}</p>
      <h3 className="mt-2 text-xl font-semibold text-slate-950">{model}</h3>
      <p className="mt-3 text-sm leading-6 text-slate-600">{description}</p>
      <Link
        href={href}
        className="mt-5 inline-flex min-h-10 items-center text-sm font-semibold text-primary hover:text-primary-700"
      >
        Detalji uređaja
      </Link>
    </Card>
  );
}