"use client";

import { Label } from "@/components/ui/label";
import { DatePicker } from "@/components/ui/date-picker";
import { cn } from "@/lib/utils/ui";
import type { BoletoFieldsSectionProps } from "./lancamento-dialog-types";

export function BoletoFieldsSection({
  formState,
  onFieldChange,
  showPaymentDate,
}: BoletoFieldsSectionProps) {
  return (
    <div className="flex w-full flex-col gap-2 md:flex-row">
      <div
        className={cn(
          "space-y-2 w-full",
          showPaymentDate ? "md:w-1/2" : "md:w-full"
        )}
      >
        <Label htmlFor="dueDate">Vencimento do boleto</Label>
        <DatePicker
          id="dueDate"
          value={formState.dueDate}
          onChange={(value) => onFieldChange("dueDate", value)}
          placeholder="Selecione o vencimento"
        />
      </div>
      {showPaymentDate ? (
        <div className="space-y-2 w-full md:w-1/2">
          <Label htmlFor="boletoPaymentDate">Pagamento do boleto</Label>
          <DatePicker
            id="boletoPaymentDate"
            value={formState.boletoPaymentDate}
            onChange={(value) => onFieldChange("boletoPaymentDate", value)}
            placeholder="Selecione a data de pagamento"
          />
        </div>
      ) : null}
    </div>
  );
}