import Link from 'next/link';
import React from 'react';

import BaseButton from './BaseButton';
import { webPagesNavBar } from '../menuNavBar';

type Props = {
  title?: string;
  subtitle?: string;
};

export default function PublicSiteFooter({
  title = 'Gracey Corporate Stay Portal',
  subtitle = 'A cleaner public front door for bookings, guest operations, and billing.',
}: Props) {
  const year = new Date().getFullYear();

  return (
    <footer className="border-t border-slate-200 bg-white">
      <div className="mx-auto grid max-w-6xl gap-8 px-6 py-10 lg:grid-cols-[1.2fr_0.8fr] lg:px-10">
        <div>
          <div className="text-[11px] font-medium uppercase tracking-[0.28em] text-slate-500">{title}</div>
          <p className="mt-3 max-w-xl text-sm leading-7 text-slate-600">{subtitle}</p>
          <div className="mt-5 text-sm text-slate-500">© {year} {title}. All rights reserved.</div>
        </div>

        <div className="flex flex-col gap-6 lg:items-end">
          <nav className="flex flex-wrap gap-4 text-sm text-slate-600 lg:justify-end">
            {webPagesNavBar.map((item) => (
              <Link key={item.href || item.label} href={item.href || '/'} className="transition-colors hover:text-slate-950">
                {item.label}
              </Link>
            ))}
          </nav>

          <div className="flex flex-wrap gap-3 lg:justify-end">
            <BaseButton href="/login" color="whiteDark" label="Login" small />
            <BaseButton href="/command-center" color="info" label="Open workspace" small />
          </div>
        </div>
      </div>
    </footer>
  );
}