import React from "react";
import { TextBox } from "@/components/ui/TextBox";
import SearchableSelect2 from "@/components/ui/SearchableSelect";

interface KnockAmountWithSelectProps {
  knockamount: any;
  setknockamount: (value: any) => void;
  knockList: any;
  setKnockList: (value: any) => void;
}

const KnockAmountWithSelect: React.FC<KnockAmountWithSelectProps> = ({
  knockamount,
  setknockamount,
  knockList,
  setKnockList,
}) => {
  return (
    <div className="group sm:col-span-2">
      <div className="flex gap-4 items-end">
        <div className="flex-1">
          <TextBox
            label="Knock Amount"
            placeholder="Enter knock amount"
            className="text-sm transition-all duration-200 group-hover:shadow-md"
            value={knockamount}
            onChange={(e) => setknockamount(e.target.value)}
          />
        </div>

        <div className="flex-1">
          <SearchableSelect2
            label=" "
            apiUrl="/api/searchabledropdown/knocklist"
            value={knockList}
            onChange={setKnockList}
            placeholder="Select knock type..."
          />
        </div>
      </div>
    </div>
  );
};

export default KnockAmountWithSelect;