"use client";

import Button from "@/src/components/admin/ui/button/Button";
import FormSection from "@/src/components/form/FormSection";
import FormSelect from "@/src/components/form/FormSelect";
import { manageTicketStatusFormData } from "@/src/validation/admin/validation";
import { Control } from "react-hook-form";

interface ManageTicketStatusProps {
  control: Control<manageTicketStatusFormData>;
  errors: any;
  isReadOnly: boolean;
  updating: boolean;
}

const TicketStatusOptions = [
  { label: "Pending", value: "PENDING" },
  { label: "In Progress", value: "IN_PROGRESS" },
  { label: "Solved", value: "SOLVED" },
  { label: "Closed", value: "CLOSED" },
];

export default function ManageTicketStatus({
  control,
  errors,
  isReadOnly,
  updating,
}: ManageTicketStatusProps) {
  return (
    <div className="space-y-6">
      <div className="bg-white border border-gray-200 rounded-xl shadow-sm p-6 overflow-visible">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">
          Manage Ticket Status
        </h3>

        <div className="relative z-10">
          <FormSelect
            name="status"
            control={control}
            label="Ticket Status"
            options={TicketStatusOptions}
            placeholder="Select Ticket Status"
            required
            disabled={isReadOnly || updating}
            error={errors?.status}
          />
        </div>

        <Button
          variant="primary"
          className="mt-4"
          disabled={updating}
         
        >
          {updating ? "Updating..." : "Update Status"}
        </Button>
      </div>
    </div>
  );
}