import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faSave, faX} from "@fortawesome/free-solid-svg-icons";
import React from "react";
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";

interface PanelHeaderProps {
    title: string;
    badge?: string;
    description: string;
    icon?: IconDefinition;
    callBackAction?: () => Promise<void>;
    secondActionIcon?: IconDefinition;
    secondActionCallback?: () => Promise<void>;
    actionIcon?: IconDefinition;
    actionText?: string;
}

export default function PanelHeader(
    {
        title,
        badge,
        description,
        icon,
        callBackAction,
        secondActionCallback,
        secondActionIcon = faSave,
        actionIcon = faX,
        actionText
    }: PanelHeaderProps) {
    return (
        <div className={'border-b border-primary/30 shrink-0 bg-gradient-to-r from-dark-background/50 to-transparent'}>
            <div className="flex justify-between items-center p-4">
                <div className="flex-1">
                    <h2 className="text-lg lg:text-xl text-primary font-bold flex items-center gap-3 flex-wrap">
                        {
                            icon && (
                                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
                                    <FontAwesomeIcon icon={icon} className="text-primary w-5 h-5"/>
                                </div>
                            )
                        }
                        <span className="tracking-wide">{title}</span>
                        {
                            badge &&
                            <span
                                className="text-xs bg-primary/20 text-primary px-3 py-1 rounded-full font-medium border border-primary/30">{badge}</span>
                        }
                    </h2>
                    {description && <p className="text-text-secondary text-xs mt-2 ml-13">{description}</p>}
                </div>
                <div className="flex items-center gap-2">
                    {
                        actionText && (
                            <button onClick={callBackAction}
                                    className="group text-text-primary px-4 py-2 text-sm bg-secondary/50 rounded-xl hover:bg-secondary transition-all border border-secondary/50 hover:border-primary/30 flex items-center gap-2 hover:shadow-md hover:scale-105">
                                <div
                                    className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center transition-transform group-hover:scale-110">
                                    <FontAwesomeIcon icon={actionIcon} className="w-4 h-4"/>
                                </div>
                                {
                                    actionText && <span className="font-medium">{actionText}</span>
                                }
                            </button>
                        )
                    }
                    {
                        secondActionCallback && (
                            <button onClick={secondActionCallback}
                                    className="group w-10 h-10 bg-primary/10 hover:bg-primary/20 rounded-lg flex items-center justify-center transition-all hover:shadow-md hover:scale-110 border border-primary/30">
                                <FontAwesomeIcon icon={secondActionIcon}
                                                 className="w-4 h-4 text-primary transition-transform group-hover:scale-110"/>
                            </button>
                        )
                    }
                    {
                        callBackAction && actionIcon && !actionText && (
                            <button onClick={callBackAction}
                                    className="group text-muted hover:text-text-primary transition-all hover:scale-110">
                                <FontAwesomeIcon icon={actionIcon}
                                                 className={'w-5 h-5 transition-transform group-hover:rotate-90'}/>
                            </button>
                        )
                    }
                </div>
            </div>
        </div>
    );
}