"use client";

import { FormField } from "@/components/ui/form-field";
import { Input } from "@/components/ui/input";
import { FileUpload } from "@/components/ui/file-upload";
import { Label } from "@/components/ui/label";
import { useTranslation } from "@/hooks/useTranslation";
import { UploadType, type UploadedFileRef } from "@/types/upload";
import type { RegistrationForm } from "./types";

interface BusinessSectionProps {
  form: RegistrationForm;
  logo: UploadedFileRef | null;
  setLogo: (logo: UploadedFileRef | null) => void;
}

export function BusinessSection({ form, logo, setLogo }: BusinessSectionProps) {
  const { t } = useTranslation();

  return (
    <div className="flex flex-col gap-5">
      <FormField
        control={form.control}
        name="businessName"
        label={t("auth.registerProvider.business.businessName")}
        render={({ field, hasError, id }) => (
          <Input
            id={id}
            placeholder={t(
              "auth.registerProvider.business.businessNamePlaceholder",
            )}
            aria-invalid={hasError}
            {...field}
          />
        )}
      />

      <div className="flex flex-col gap-1.5">
        <Label>{t("auth.registerProvider.business.logo")}</Label>
        <FileUpload
          uploadType={UploadType.PROVIDER_LOGO}
          variant="image"
          accept="image/jpeg,image/png,image/webp"
          value={logo}
          onChange={setLogo}
          hint={t("auth.registerProvider.business.logoHint")}
        />
      </div>
    </div>
  );
}