import { Form } from '@/components/ui/form';
import { useProfitCalculator } from '@/hooks/use-profit-calculator';
import { getImageUrl } from '@/utils/getImageUrl';
import { CALCULATION_VARIANTS } from '../variants/calculation.variants';

export type CalculationVariant = 'variant1' | 'variant2';

export type CalculationProps = {
  title: string;
  subtitle?: string;
  description: string;
  buttonLabel: string;
  image?: string;
  backgroundImage?: string;
  variant?: CalculationVariant;
};

export default function CalculationSection({
  title,
  subtitle,
  description,
  buttonLabel,
  image = 'https://placehold.co/495x515',
  backgroundImage,
  variant = 'variant1',
}: CalculationProps) {
  const v = CALCULATION_VARIANTS[variant];
  const { plans, profit, format, form, isPending, onSubmit } =
    useProfitCalculator();

  return (
    <section className="relative overflow-hidden bg-white py-8 font-inter md:py-28">
      {v.renderBackground?.({
        title,
        subtitle,
        description,
        buttonLabel,
        image,
        backgroundImage,
        variant,
      })}
      <div
        className={`container px-4 md:px-0 ${
          variant === 'variant1'
            ? 'flex flex-col gap-8 md:flex-row md:items-center md:gap-10'
            : 'flex flex-col items-center'
        }`}
      >
        {variant === 'variant1' && (
          <div className="w-1/2 md:w-[40%]">
            <img src={getImageUrl(image)} alt={title} className="rounded-2xl" />
          </div>
        )}

        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className={
              variant === 'variant1'
                ? 'flex w-full flex-col md:w-[60%]'
                : 'flex w-full flex-col items-center'
            }
          >
            {variant === 'variant1' && subtitle && (
              <h4 className="font-semibold text-black">{subtitle}</h4>
            )}

            <h2
              className={
                variant === 'variant1'
                  ? 'mb-2 font-syne text-3xl font-bold md:text-[48px]'
                  : 'text-center text-2xl font-bold md:text-[40px]'
              }
            >
              {title}
            </h2>

            <p
              className={
                variant === 'variant1'
                  ? 'mb-8 text-black'
                  : 'text-center text-black/60'
              }
            >
              {description}
            </p>

            {v.render({
              plans,
              profit,
              format,
              form,
              isPending,
              buttonLabel,
            })}
          </form>
        </Form>
      </div>
    </section>
  );
}