// SchemaDetail.jsx
import { useParams } from 'react-router-dom';
import React, { useEffect } from 'react';
import { FaGlobe, FaUser, FaPlus, FaRobot } from 'react-icons/fa';
import './SchemaDetails.css'; // Import custom CSS for animations

const SchemaDetail = () => {
    const { schemaName } = useParams();

    const handleFindAllPublic = () => {
        console.log(`Finding all public items for schema: ${schemaName}`);
        // Implement the logic for finding all public items here
    };

    const handleFindAllCreated = () => {
        console.log(`Finding all created items for schema: ${schemaName}`);
        // Implement the logic for finding all created items here
    };

    const handleCreateNew = () => {
        console.log(`Creating new item for schema: ${schemaName}`);
        // Implement the logic for creating a new item here
    };

    const handleGenerateWithAI = () => {
        console.log(`Generating new item with AI for schema: ${schemaName}`);
        // Implement the logic for generating a new item with AI here
    };

    useEffect(() => {
        const buttons = document.querySelectorAll('.animated-button');
        buttons.forEach((button, index) => {
            setTimeout(() => {
                button.classList.add('slide-in');
            }, index * 100); // delay each button's animation
        });
    }, []);

    return (
        <div className="h-full p-4">
            <header className="text-center my-6">
                <h1 className="text-4xl font-bold ">{schemaName} Details</h1>
            </header>
            <div className="max-w-4xl mx-auto mb-6">

                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <button
                        onClick={handleFindAllPublic}
                        className="animated-button w-full bg-red-500 text-white p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 flex flex-col items-center border-4 border-red-900"
                    >
                        <FaGlobe className="text-2xl text-red-900 mb-2" />
                        <span className="font-bold">Find All Public</span>
                    </button>
                    <button
                        onClick={handleFindAllCreated}
                        className="animated-button w-full bg-green-500 text-white p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 flex flex-col items-center border-4 border-green-700"
                    >
                        <FaUser className="text-2xl text-green-700 mb-2" />
                        <span className="font-bold">Find All Created</span>
                    </button>
                    <button
                        onClick={handleCreateNew}
                        className="animated-button w-full bg-blue-500 text-white p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 flex flex-col items-center border-4 border-blue-700"
                    >
                        <FaPlus className="text-2xl text-blue-700 mb-2" />
                        <span className="font-bold">Create New</span>
                    </button>
                    <button
                        onClick={handleGenerateWithAI}
                        className="animated-button w-full bg-black text-white p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 flex flex-col items-center border-4 border-gray-900"
                    >
                        <FaRobot className="text-2xl text-gray-500 mb-2" />
                        <span className="font-bold">Generate with AI</span>
                    </button>
                </div>
            </div>
        </div>
    );
};

export default SchemaDetail;