import Link from 'next/link';
import { ArrowLeft } from 'lucide-react';
import { ShellPage } from '@/components/layout/DashboardPage';
import { EventForm } from '@/components/admin/EventForm';
import { getMessages } from '@/i18n/server';

export default async function NewEventPage() {
  const all = (await getMessages()).admin;
  const t = all.newEvent;
  return (
    <ShellPage className="max-w-[720px]">
      <Link href="/admin/sesi" className="inline-flex items-center gap-1.5 text-[13px] font-medium text-muted hover:text-ink">
        <ArrowLeft className="size-4" aria-hidden />
        {all.event.back}
      </Link>
      <h1 className="mt-6 text-[28px] font-semibold tracking-[-0.02em] text-ink">{t.title}</h1>
      <p className="mt-2 mb-8 text-[15px] text-muted">
        {t.text}
      </p>
      <div className="rounded-panel bg-surface p-6 shadow-card ring-1 ring-line/70 sm:p-8">
        <EventForm />
      </div>
    </ShellPage>
  );
}