import React, { PropsWithChildren } from 'react'
import { chakra, Text } from '@chakra-ui/react'

export enum ImageButtonVariant {
    Black,
    White,
    Current
}

export type ImageButtonProps = PropsWithChildren<{
    image: any
    variant: ImageButtonVariant
    target: '_blank' | '_self'
}>

const ButtonWithIcon = ({ image, variant, target = '_self', children }: ImageButtonProps) => {
    const isBlackVariant = variant === ImageButtonVariant.Black

    return (
        <chakra.span
            height={{ base: "54px", md: "41px", "2xl": "54px" }}
            display="inline-flex"
            justifyContent="center"
            alignItems="center"
            padding={{ base: "0 16px", md: "0 20px", "2xl": "0 32px" }}
            cursor="pointer"
            border="2px solid"
            borderColor={isBlackVariant ? "gray.100" : "gray.800"}
            color={isBlackVariant ? "gray.100" : "gray.800"}
            maxW={{ base: '90vw', lg: 'md' }}
            _hover={{
                borderColor: "uat_orange",
                "& .title": {
                    color: "uat_orange"
                },
                "& img": {
                    filter: "invert(57%) sepia(82%) saturate(2505%) hue-rotate(359deg) brightness(92%) contrast(105%)"
                }
            }}
        >
            <Text
                as="span"
                className="title"
                textTransform="uppercase"
                fontFamily="iAWriterQuattroS"
                fontWeight="900"
                fontSize={{ base: "lg", md: "sm", "2xl": "lg" }}
                fontStyle="italic"
                lineHeight="1.1"
                letterSpacing="0.08rem"
                paddingRight={{ base: "16px", md: "12px", "2xl": "16px" }}
                // Pro malé obrazovky - text truncation
                sx={{
                    "@media (max-width: 480px)": {
                        display: "-webkit-box",
                        WebkitLineClamp: 1,
                        WebkitBoxOrient: "vertical",
                        whiteSpace: "pre-wrap"
                    }
                }}
            >
                {children}
            </Text>
            {image && (
                <chakra.span
                    width={{ base: "auto", md: "auto", }}
                    height={{ base: "auto", md: "auto", }}
                >
                    {image}
                </chakra.span>
            )}
        </chakra.span>
    )
}

ButtonWithIcon.defaultProps = {
    variant: ImageButtonVariant.White,
}

export default ButtonWithIcon