import { FormCard, FormContent, FormInfo } from "@/components/FormCard";
import { useGlobal } from "@/context/global";
import { faCloudUploadAlt } from "@fortawesome/free-solid-svg-icons";
import Markdown from "react-markdown";
import UploadProjectForm from "./form";

type UploadProjectProps<TData> = {};
export default function UploadProject({}: UploadProjectProps<any>) {
  const { dict } = useGlobal();

  return (
    <>
      <FormCard>
        <FormContent
          title={dict.pages.project_list.form.title}
          subtitle={dict.pages.project_list.form.subtitle}
          icon={faCloudUploadAlt}
        >
          <UploadProjectForm />
        </FormContent>
        <FormInfo>
          <h1 className="text-xl font-bold">
            {dict.pages.project_list.form.side_card.title}
          </h1>
          <ul className="list-outside list-disc ps-4 text-xs">
            <li className="mt-2 first-of-type:mt-0">
              <Markdown>
                {dict.pages.project_list.form.side_card.point_1}
              </Markdown>
            </li>
            <li className="mt-2 first-of-type:mt-0">
              <Markdown>
                {dict.pages.project_list.form.side_card.point_2}
              </Markdown>
            </li>
          </ul>
        </FormInfo>
      </FormCard>
    </>
  );
}