"use client";

import Link from "next/link";
import type { ReactNode } from "react";

export default function AuthShell({
  title,
  subtitle,
  children,
  footer,
}: {
  title: string;
  subtitle?: string;
  children: ReactNode;
  footer?: ReactNode;
}) {
  return (
    <div className="min-h-screen bg-[#fbf7f0] flex items-center justify-center p-6">
      <div className="w-full max-w-md">
        <div className="text-center mb-8">
          <Link
            href="/"
            className="inline-block text-[#d6ac63] text-xs uppercase tracking-[0.3em] font-light"
          >
            Fauzan Resorts
          </Link>
          <h1 className="mt-4 text-2xl font-light uppercase tracking-wide text-black">
            {title}
          </h1>
          {subtitle ? (
            <p className="mt-2 text-sm font-light text-gray-600">{subtitle}</p>
          ) : null}
        </div>
        <div className="border border-[#d6ac63]/20 bg-white shadow-xl shadow-[#d6ac63]/5 p-8">
          {children}
        </div>
        {footer ? (
          <div className="mt-6 text-center text-xs text-gray-600 font-light">
            {footer}
          </div>
        ) : null}
      </div>
    </div>
  );
}

export const inputClass =
  "block w-full appearance-none border border-[#d6ac63]/30 bg-white px-4 py-3 text-sm text-black tracking-wide transition-colors focus:border-[#d6ac63] focus:outline-none focus:ring-0";

export const labelClass =
  "block text-[10px] uppercase tracking-[0.2em] text-gray-500 mb-2 font-['Times_New_Roman',Times,serif]";

export const buttonPrimaryClass =
  "group inline-flex w-full items-center justify-center gap-2 bg-black px-6 py-3 text-sm font-light uppercase tracking-wide text-white transition-colors duration-300 hover:bg-[#d6ac63] disabled:opacity-60 disabled:cursor-not-allowed";