import { ExpenseWorkspace } from "@/components/expense-workspace";
import { RecurringExpenseManager } from "@/components/recurring-expense-manager";
import { CATEGORY_OPTIONS } from "@/lib/categories";

export const metadata = {
  title: "Add Expense | Monthy Tracker",
};

export default function AddExpensePage() {
  return (
    <div className="space-y-8">
      <header className="max-w-2xl space-y-3">
        <p className="text-sm font-semibold uppercase tracking-[0.28em] text-amber-700 dark:text-amber-500">Add Expense</p>
        <h1 className="text-4xl font-semibold text-stone-950 dark:text-white">Capture spending while it still feels fresh.</h1>
        <p className="text-lg leading-8 text-stone-600 dark:text-stone-400">
          Enter the shop name and the app can auto-fill a category locally for known merchants, with offline AI help for unfamiliar ones.
        </p>
      </header>

      <RecurringExpenseManager categoryOptions={CATEGORY_OPTIONS.map((option) => ({ ...option }))} />

      <ExpenseWorkspace categoryOptions={CATEGORY_OPTIONS.map((option) => ({ ...option }))} />
    </div>
  );
}