import Image from "next/image";
import { CreatePlanForm } from "@/components/create-plan-form";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { getDictionary } from "@/get-dictionary";

export default async function Home({
  params,
}: {
  params: Promise<{ lang: string }>;
}) {
  const { lang } = await params;
  const dict = await getDictionary(lang as any);

  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-4 bg-muted/20">
      <div className="w-full max-w-md space-y-4">
        <div className="text-center space-y-4">
          <div className="flex justify-center">
            <div className="bg-white p-4 rounded-full shadow-lg border-2 border-primary/20">
              <Image
                src="/icon.png"
                alt="Cat Sitting Planner Logo"
                width={80}
                height={80}
                className="rounded-lg"
              />
            </div>
          </div>
          <div className="space-y-2">
            <h1 className="text-3xl font-bold tracking-tighter">{dict.home.title}</h1>
            <p className="text-muted-foreground">{dict.home.description}</p>
          </div>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>{dict.home.createPlan}</CardTitle>
            <CardDescription>{dict.home.createPlanDesc}</CardDescription>
          </CardHeader>
          <CardContent>
            <CreatePlanForm dict={dict.createPlanForm} lang={lang} />
          </CardContent>
        </Card>
      </div>
    </main>
  );
}