import styled from "styled-components";
import { useTheme } from "styled-components";
import { IconComponent } from "../../../const/buttons/icons";

const Button = styled.button.withConfig({
    shouldForwardProp: (prop) => !['color', '$hoverсolor', 'size', '$iconpos'].includes(prop),
  })<{ color: string; size?: string, $hoverсolor: string, $iconpos: string }>`
    background-color: ${(props) => props.color};
    border: none;
    padding: ${(props) =>
        props.size === "small"
            ? "10px 28px"
            : props.size === "big"
                ? "10px 20px"
                : "12px 20px"}; // По умолчанию
    border-radius: 8px;
    color: white;
    font-size: ${(props) =>
        props.size === "small"
            ? "14px"
            : props.size === "big"
                ? "16px"
                : "14px"}; // По умолчанию
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: ${(props) => 
        props.$iconpos === 'right' 
            ? 'row-reverse' 
            : 'row'};
    gap: 10px;
    transition: all .3s ease;
    &:hover{
        background-color: ${(props) => props.$hoverсolor};
    }
`;

type Props = {
    color?: string;
    hoverColor?: string
    size?: "small" | "big";
    title: string
    onClick?: () => void;
    type?: "button" | "submit" | "reset" | undefined
    icon?: string
    iconPosition?: 'left' | 'right'
    iconSize?: {
        width: string,
        height: string
    }
    style?: any
};

export const MainButton = ({ color, size, title, hoverColor, type, icon, iconPosition, iconSize, onClick, style }: Props) => {
    const theme = useTheme();
    const defaultColor: string = theme.accent;
    const defaultHoverColor: string = theme.accentHover
   

    return (
        <Button
            className="unselectable"
            color={color || defaultColor} size={size}
            $hoverсolor={hoverColor || defaultHoverColor}
            onClick={onClick}
            type={type}
            $iconpos={iconPosition || 'left'}
            style={style}
        >
            {icon && <IconComponent name={icon} width={iconSize?.width} height={iconSize?.height} setColor="white"/> }
            {title}
        </Button>
    );
};