import { useState } from "react";
import { FaPlus } from "react-icons/fa";

type RecipientAddCardProps = {
  addRecipient: (name: string, email: string, type: "mailToSign" | "inPerson" | "cc") => void; // Adjust the parameter type as needed
};

const RecipientAddCard: React.FC<RecipientAddCardProps> = ({ addRecipient }) => {

  const [recipient] = useState()

  const handleRecipientAdd = () => {

  }


  return (
    <div className="p-4 bg-[var(--primaryLight)] shadow-sm mb-4 w-[650px] rounded-md">
      <p className="pb-4 text-md">Add Recipient Details</p>
      <div className="py-1">
        <input

          type="text"
          placeholder="Recipient Name"
          className="w-full p-2 rounded mb-2 bg-white"
        />
      </div>
      <div className="py-1">
        <input
          type="email"
          placeholder="Recipient Email"
          className="w-full p-2 rounded mb-2 bg-white"
        />
      </div>

      <div className="flex justify-between py-2">
        <div className="flex gap-4 justify-end">
          {[
            { label: "Mail To Sign", value: "mailToSign" },
            { label: "In-Person", value: "inPerson" },
            { label: "CC", value: "cc" }
          ].map((option) => (
            <label key={option.value} className="flex items-center gap-2">
              <input
                type="radio"
                name={`send-type`}
                value={option.value}
                defaultChecked={option.value === "mailToSign"}
                className="accent-blue-500"
              />
              {option.label}
            </label>
          ))}
        </div>


        <button
          // onClick={addRecipient}
          className="flex cursor-pointer items-center gap-2 bg-green-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-green-600"
        >
          <FaPlus /> Add Recipient
        </button>
      </div>

    </div>
  );
};

export default RecipientAddCard;