"use client";

import Link from "next/link";
import { ArrowLeft, Plus } from "lucide-react";
import { AdminGuard } from "@/components/admin/AdminGuard";
import { AdminShell } from "@/components/admin/AdminShell";

export default function AddCarModelPage() {
  return (
    <AdminGuard>
      <AdminShell
        title="Add model"
        lead="Placeholder form for model details. The full model fields can be added next."
      >
        <div className="max-w-2xl rounded-lg border border-border bg-white p-6 shadow-sm">
          <Link
            href="/admin/car-logos"
            className="inline-flex items-center gap-2 text-sm font-black text-muted-foreground transition hover:text-primary"
          >
            <ArrowLeft className="h-4 w-4" />
            Back to car logos
          </Link>

          <div className="mt-6 grid h-14 w-14 place-items-center rounded-md bg-primary/10 text-primary">
            <Plus className="h-7 w-7" />
          </div>
          <h2 className="mt-5 text-3xl font-black tracking-tight text-foreground">Add model</h2>
          <p className="mt-3 text-sm font-semibold leading-6 text-muted-foreground">
            This page is ready so the logo cards can open without a 404. Tell me the model fields
            you want here and I will wire the form and database table next.
          </p>
        </div>
      </AdminShell>
    </AdminGuard>
  );
}