import { Module } from "@/interfaces";
import clsx from "clsx";
import { ReactNode } from "react";
import { MdDelete, MdEdit, MdEditOff, MdRefresh, MdSave, MdGrade, MdOutlineGrade } from "react-icons/md";

interface Props {
    title: string;
    description: string;
    editing: boolean;
    module?: Module;
    handleSave: () => void;
    handleDiscard: () => void;
    modeHandle?: () => void;
    evaluationHandle?: () => void;
    isEvaluationEnabled?: boolean;
    mode?: "delete" | "edit";
    children?: ReactNode;
}

const Header: React.FC<Props> = ({ title, description, editing, isEvaluationEnabled, handleSave, handleDiscard, modeHandle, evaluationHandle, children, mode = "delete", module }) => {
    return (
        <div className="flex justify-between items-center mb-6 text-sm">
            <div>
                <h1 className="text-2xl font-bold text-gray-800">{title}</h1>
                <p className="text-gray-600 mt-1">{description}</p>
            </div>
            <div className="flex gap-2">
                {children}
                <button
                    onClick={handleSave}
                    disabled={!editing}
                    className={
                        clsx("px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-200",
                            editing ? 'bg-green-500 text-white hover:bg-green-600' : 'bg-gray-100 text-gray-400 cursor-not-allowed'
                        )}
                >
                    <MdSave size={18} />
                    Save
                </button>
                <button
                    onClick={handleDiscard}
                    disabled={!editing}
                    className={clsx(
                        "px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-200",
                        editing ? 'bg-gray-500 text-white hover:bg-gray-600' : 'bg-gray-100 text-gray-400 cursor-not-allowed'
                    )}
                >
                    <MdRefresh size={18} />
                    Discard
                </button>
                {mode === "delete" ? (
                    <button
                        onClick={modeHandle}
                        className="px-4 py-2 bg-white border border-red-500 text-red-500 hover:bg-red-50 rounded-lg transition-all duration-200 flex items-center gap-2"
                    >
                        <MdDelete size={18} />
                        Delete
                    </button>
                ) : (
                    <button
                        onClick={modeHandle}
                        className={`px-4 py-2 bg-ielts-${module}/80 text-white hover:bg-ielts-${module} rounded-lg transition-all duration-200 flex items-center gap-2`}
                    >
                        {editing ? <MdEditOff size={18} /> : <MdEdit size={18} />}
                        Edit
                    </button>
                )}
                {mode === "delete" &&
                    <button
                        onClick={evaluationHandle}
                        className={clsx(
                            "px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-200",
                            isEvaluationEnabled
                                ? 'bg-amber-500 text-white hover:bg-amber-600'
                                : 'bg-gray-200 text-gray-600 hover:bg-gray-300'
                        )}
                    >
                        {isEvaluationEnabled ? <MdGrade size={18} /> : <MdOutlineGrade size={18} />}
                        {isEvaluationEnabled ? 'Graded Exercise' : 'Practice Only'}
                    </button>
                }
            </div>
        </div>
    );
}

export default Header;