import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import React from "react";
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";

interface CollapsableButtonProps {
    showCollapsable: boolean;
    text: string;
    onClick: () => void;
    icon?: IconDefinition;
}

export default function CollapsableButton(
    {
        showCollapsable,
        text,
        icon,
        onClick
    }: CollapsableButtonProps) {
    return (
        <button
            onClick={onClick}
            className={`group px-4 py-2 rounded-lg mr-2 transition-all duration-200 flex items-center gap-2 ${
                showCollapsable
                    ? 'bg-primary/20 text-primary border border-primary/40 shadow-md shadow-primary/20 scale-105'
                    : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-sm hover:scale-105'
            }`}
        >
            {icon && <FontAwesomeIcon icon={icon}
                                      className="w-4 h-4 transition-transform duration-200 group-hover:scale-110"/>}
            <span className={'hidden lg:block text-sm font-medium'}>{text}</span>
        </button>
    )
}