"use client";

import { PersianDatePicker } from "@/components/ui/PersianDatePicker";

export function PeriodDateTimeField({
  value,
  onChange,
}: {
  value?: string | null;
  onChange: (iso: string | null) => void;
}) {
  return (
    <div className="flex items-center gap-2">
      <div className="min-w-0 flex-1">
        <PersianDatePicker
          withTime
          value={value ?? ""}
          onChange={(iso) => onChange(iso.trim() || null)}
        />
      </div>
      {value ? (
        <button
          type="button"
          className="shrink-0 text-xs text-[var(--muted)] hover:text-primary"
          onClick={() => onChange(null)}
        >
          پاک کردن
        </button>
      ) : null}
    </div>
  );
}