import CalendarIcon from "@mui/icons-material/CalendarMonthOutlined";
import PayIcon from "@mui/icons-material/CurrencyExchangeOutlined";
import DiscountsIcon from "@mui/icons-material/LocalOfferOutlined";
import ButtonMaterial from "@mui/material/Button";

export interface PaymentToolbarProps {
    onMarkAsPayed?: () => void;
    onGotoAppointments?: () => void;
    onApplyDiscount?: () => void;
    onQuitDiscount?: () => void;
}

const PaymentToolbar = (props: PaymentToolbarProps) => {
    return (
        <div
            style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                width: "100%",
                height: "60px",
                color: "var(--white)",
            }}
        >
            {props.onGotoAppointments && (
                <ButtonMaterial
                    variant="text"
                    startIcon={<CalendarIcon />}
                    sx={{ color: "var(--white)" }}
                    onClick={props.onGotoAppointments}
                >
                    Turnos
                </ButtonMaterial>
            )}

            {props.onMarkAsPayed && (
                <ButtonMaterial
                    variant="text"
                    startIcon={<PayIcon />}
                    sx={{ color: "var(--white)" }}
                    onClick={props.onMarkAsPayed}
                >
                    Pagar
                </ButtonMaterial>
            )}
            {props.onApplyDiscount && (
                <ButtonMaterial
                    variant="text"
                    startIcon={<DiscountsIcon />}
                    sx={{ color: "var(--white)" }}
                    onClick={props.onApplyDiscount}
                >
                    Aplicar Descuento
                </ButtonMaterial>
            )}

            {props.onQuitDiscount && (
                <ButtonMaterial
                    variant="text"
                    startIcon={<DiscountsIcon />}
                    sx={{ color: "var(--white)" }}
                    onClick={props.onQuitDiscount}
                >
                    Quitar Descuento
                </ButtonMaterial>
            )}
        </div>
    );
};

export default PaymentToolbar;
