import Link from "next/link";
import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import MainTitle from "@/components/layout/dashboard/main-title";

type PageProps = {
  params: { app: string };
};

const Page = ({ params }: PageProps) => {
  const { app } = params;

  return (
    <>
      <MainTitle title="New project" goBack>
        <Link href={`/${app}/projects`}>
          <Button variant="outline">Cancel</Button>
        </Link>
      </MainTitle>
      <div className="grid gap-5 md:grid-cols-3">
        <div className="col-span-2">
          <Card>
            <CardContent className="flex flex-col gap-4">
              <div className="flex flex-col md:flex-row md:justify-between">
                <h3 className="font-semibold text-gray-700">Project draft</h3>
                <Button size="sm" type="button" disabled>
                  Save project
                </Button>
              </div>
              <div className="space-y-5">
                <p className="font-light text-gray-500">
                  Form fields will go here when the create flow is wired up. For now this screen is a layout
                  placeholder.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
        <div className="overflow-scroll">
          <Card className="h-min">
            <CardContent className="flex flex-col gap-1 md:flex-row md:justify-between">
              <h3 className="font-semibold text-gray-700">Summary</h3>
              <p className="text-sm text-[#8B8D97]">No data yet</p>
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  );
};

export default Page;