import {
  Header,
  JoinedToday,
  JoinedTodayWithAvatars,
  MoneyBackGuarantee,
  Policy,
  ProgressToSeeSoulmate,
  TrustedByOver,
} from "@/components/domains/TrialPayment";
import {
  FindingOneGuide,
  CommonQuestions,
  PaymentButtons,
  Reviews,
  StepsToSeeSoulmate,
  TotalPrice,
  TryForDays,
  UnlockYourSketch,
  UsersPortraits,
  StillHaveQuestions,
  Footer,
} from "@/components/domains/TrialPayment/Cards";
import { cn } from "@/lib/utils";

interface TrialPaymentProps extends React.ComponentProps<"div"> {
  header?: React.ComponentProps<typeof Header>;
  unlockYourSketch?: React.ComponentProps<typeof UnlockYourSketch>;
  joinedToday?: React.ComponentProps<typeof JoinedToday>;
  trustedByOver?: React.ComponentProps<typeof TrustedByOver>;
  findingOneGuide?: React.ComponentProps<typeof FindingOneGuide>;
  tryForDays?: React.ComponentProps<typeof TryForDays>;
  totalPrice?: React.ComponentProps<typeof TotalPrice>;
  paymentButtons?: React.ComponentProps<typeof PaymentButtons>;
  moneyBackGuarantee?: React.ComponentProps<typeof MoneyBackGuarantee>;
  policy?: React.ComponentProps<typeof Policy>;
  usersPortraits?: React.ComponentProps<typeof UsersPortraits>;
  joinedTodayWithAvatars?: React.ComponentProps<typeof JoinedTodayWithAvatars>;
  progressToSeeSoulmate?: React.ComponentProps<typeof ProgressToSeeSoulmate>;
  stepsToSeeSoulmate?: React.ComponentProps<typeof StepsToSeeSoulmate>;
  reviews?: React.ComponentProps<typeof Reviews>;
  commonQuestions?: React.ComponentProps<typeof CommonQuestions>;
  stillHaveQuestions?: React.ComponentProps<typeof StillHaveQuestions>;
  footer?: React.ComponentProps<typeof Footer>;
}

export default function TrialPayment({
  header,
  unlockYourSketch,
  joinedToday,
  trustedByOver,
  findingOneGuide,
  tryForDays,
  totalPrice,
  paymentButtons,
  moneyBackGuarantee,
  policy,
  usersPortraits,
  joinedTodayWithAvatars,
  progressToSeeSoulmate,
  stepsToSeeSoulmate,
  reviews,
  commonQuestions,
  stillHaveQuestions,
  footer,
  ...props
}: TrialPaymentProps) {
  return (
    <div
      {...props}
      className={cn(
        "w-full min-h-dvh max-w-[560px] mx-auto bg-trial-payment-secondary",
        "px-[17px] py-1.5 pb-[82px]",
        "flex flex-col items-center",
        props.className
      )}
    >
      {header && <Header {...header} />}
      {unlockYourSketch && <UnlockYourSketch {...unlockYourSketch} />}
      {joinedToday && (
        <JoinedToday
          {...joinedToday}
          className={cn("mt-[18px]", joinedToday.className)}
        />
      )}
      {trustedByOver && (
        <TrustedByOver
          {...trustedByOver}
          className={cn("mt-[9px]", trustedByOver.className)}
        />
      )}
      {findingOneGuide && (
        <FindingOneGuide
          {...findingOneGuide}
          className={cn("mt-[22px]", findingOneGuide.className)}
        />
      )}
      {tryForDays && (
        <TryForDays
          {...tryForDays}
          className={cn("mt-[46px]", tryForDays.className)}
        />
      )}
      {totalPrice && (
        <TotalPrice
          {...totalPrice}
          className={cn("mt-[46px]", totalPrice.className)}
        />
      )}
      {paymentButtons && (
        <PaymentButtons
          {...paymentButtons}
          className={cn("mt-[46px]", paymentButtons.className)}
        />
      )}
      {moneyBackGuarantee && (
        <MoneyBackGuarantee
          {...moneyBackGuarantee}
          className={cn("mt-[17px]", moneyBackGuarantee.className)}
        />
      )}
      {policy && (
        <Policy {...policy} className={cn("mt-4", policy.className)} />
      )}
      {usersPortraits && (
        <UsersPortraits
          {...usersPortraits}
          className={cn("mt-12", usersPortraits.className)}
        />
      )}
      {joinedTodayWithAvatars && (
        <JoinedTodayWithAvatars
          {...joinedTodayWithAvatars}
          className={cn("mt-[22px]", joinedTodayWithAvatars.className)}
        />
      )}
      {progressToSeeSoulmate && (
        <ProgressToSeeSoulmate
          {...progressToSeeSoulmate}
          className={cn("mt-12", progressToSeeSoulmate.className)}
        />
      )}
      {stepsToSeeSoulmate && (
        <StepsToSeeSoulmate
          {...stepsToSeeSoulmate}
          className={cn("mt-12", stepsToSeeSoulmate.className)}
        />
      )}
      {reviews && (
        <Reviews {...reviews} className={cn("mt-12", reviews.className)} />
      )}
      {commonQuestions && (
        <CommonQuestions
          {...commonQuestions}
          className={cn("mt-[31px]", commonQuestions.className)}
        />
      )}
      {stillHaveQuestions && (
        <StillHaveQuestions
          {...stillHaveQuestions}
          className={cn("mt-8", stillHaveQuestions.className)}
        />
      )}
      {footer && (
        <Footer {...footer} className={cn("mt-[60px]", footer.className)} />
      )}
    </div>
  );
}
