import type { ComponentProps } from "react";
import React from "react";

import FormTextInput from "@/components/form/components/basic/form-text-input";
import FormTextAreaInput from "@/components/form/components/basic/form-textarea-input";
import FormTimePicker from "@/components/form/components/basic/form-time-picker";
import { TpDatePickerWrappedFormItem } from "@/features/travel-planner/components/travel-planner/components/tp-date-picker-form";
import { cn } from "@/libs/utils";
import { requiredRule } from "@/validations/form-rules/rules/required-rule";

interface TransferSummaryInfoFormItemsProps {
  prefix: string;
  className?: ComponentProps<"div">["className"];
}

const TransferSummaryInfoForm = (props: TransferSummaryInfoFormItemsProps) => {
  return (
    <div className={cn("space-y-4", props.className)}>
      <div className="grid grid-cols-2 gap-4">
        <FormTextInput
          fullWidth
          size="lg"
          label="Uçuş No*"
          name={`${props.prefix}-flightNo`}
          rules={{ required: requiredRule }}
        />

        <TpDatePickerWrappedFormItem
          placeholder="Uçuş Tarihi*"
          name={`${props.prefix}-flightDate`}
          rules={{ required: requiredRule }}
        />

        <FormTimePicker
          name={`${props.prefix}-departureTime`}
          label="Kalkış Saati*"
          rules={{ required: requiredRule }}
        />
        <FormTimePicker
          name={`${props.prefix}-arrivalTime`}
          label="Varış Saati*"
          rules={{ required: requiredRule }}
        />
      </div>
      <div>
        <FormTextInput
          name={`${props.prefix}-airlineName`}
          fullWidth
          size="lg"
          label="Havayolu Şirketi*"
          rules={{ required: requiredRule }}
        />
      </div>

      <div className="flex flex-col gap-4">
        <FormTextAreaInput
          name={`${props.prefix}-address`}
          placeholder="Sizi nereye bırakalım? (Adresiniz)*"
          rules={{ required: requiredRule }}
        />
      </div>
    </div>
  );
};

export default TransferSummaryInfoForm;