import { FC } from 'react';
import { useForm } from 'react-hook-form';
import { Button } from '@/components/ui/button';
import { Stack } from '@/components/ui/stack';
import { Project } from '@/lib/types';

type ProjectFormProps = {
  project?: Project;
  onSubmit: (project: Partial<Project>) => void;
};

type FormValues = {
  title: string;
  description: string;
};

export const ProjectForm: FC<ProjectFormProps> = ({ onSubmit, project }) => {
  const { register, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      title: project?.title || '',
      description: project?.description || '',
    },
  });

  const onFormSubmit = (data: FormValues) => {
    onSubmit({
      jobIds: [],
      createdAt: new Date(),
      ...data,
    });
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onFormSubmit)}>
        <Stack className="h-160 w-100vw flex flex-col gap-4 border-gray-200 rounded-lg bg-white p-6 text-black sm:max-w-130 dark:bg-zinc-800 dark:text-white/90">
          <div className="flex flex-col gap-4">
            <div className="flex flex-col gap-1">
              <label>Project Title</label>
              <input
                {...register('title')}
                className="border border-zinc-300 rounded bg-white px-2 py-1"
              />
            </div>

            <div className="flex flex-col gap-1">
              <label>Project Description</label>
              <textarea
                {...register('description')}
                className="border border-zinc-300 rounded bg-white px-2 py-1"
                rows={4}
              />
            </div>
          </div>

          <Button className="mt-auto bg-blue-5 text-white" type="submit">
            Save
          </Button>
        </Stack>
      </form>
    </div>
  );
};
