import { contactAction } from "@/server/actions/contact";

export default async function ContactPage({
  searchParams,
}: {
  searchParams: Promise<{ ok?: string; error?: string }>;
}) {
  const sp = await searchParams;
  return (
    <div className="mx-auto max-w-lg">
      <h1 className="text-3xl font-semibold">Contacto</h1>
      <p className="mt-2 text-white/60">Escribe a soporte — se crea un ticket.</p>
      {sp.ok && (
        <p className="mt-3 rounded-lg bg-[var(--lime)]/15 px-3 py-2 text-sm text-[var(--lime)]">
          Ticket enviado.
        </p>
      )}
      <form action={contactAction} className="card mt-6 space-y-4">
        <div>
          <label className="label">Nombre</label>
          <input className="input" name="name" />
        </div>
        <div>
          <label className="label">Asunto</label>
          <input className="input" name="subject" required />
        </div>
        <div>
          <label className="label">Mensaje</label>
          <textarea className="input min-h-28" name="message" required />
        </div>
        <button className="btn-primary" type="submit">
          Enviar
        </button>
      </form>
    </div>
  );
}