Untitled

import React, { useState } from "react";
import { Check, Copy, Pencil, Save, X } from "lucide-react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

const IconToggleButtons = () => {
  const [activeToggle, setActiveToggle] = useState("");

  const handleToggle = (value) => {
    if (activeToggle === value) {
      setActiveToggle(""); // Deselect if clicked again
    } else {
      setActiveToggle(value); // Set the active toggle
    }
  };

  return (
    <div className="p-4 bg-gray-100 rounded-lg shadow-md flex items-center justify-center">
      <ToggleGroup
        type="single"
        className="flex space-x-4"
        value={activeToggle}
        onValueChange={handleToggle}
      >
        {/* Copy Toggle */}
        <ToggleGroupItem
          value="copy"
          className="flex items-center justify-center w-10 h-10 border rounded-full hover:bg-gray-200 transition"
        >
          {activeToggle === "copy" ? (
            <Check className="w-5 h-5 text-green-500" />
          ) : (
            <Copy className="w-5 h-5 text-gray-600" />
          )}
        </ToggleGroupItem>

        {/* Edit/Save Toggle */}
        <ToggleGroupItem
          value="edit"
          className="flex items-center justify-center w-10 h-10 border rounded-full hover:bg-gray-200 transition"
        >
          {activeToggle === "edit" ? (
            <Save className="w-5 h-5 text-blue-500" />
          ) : (
            <Pencil className="w-5 h-5 text-gray-600" />
          )}
        </ToggleGroupItem>

        {/* Cancel Toggle */}
        {activeToggle === "edit" && (
          <ToggleGroupItem
            value="cancel"
            className="flex items-center justify-center w-10 h-10 border rounded-full hover:bg-gray-200 transition"
            onClick={() => setActiveToggle("")} // Reset to default
          >
            <X className="w-5 h-5 text-red-500" />
          </ToggleGroupItem>
        )}
      </ToggleGroup>
    </div>
  );
};

export default IconToggleButtons;