import { Box, Stack, Image, Flex, Text } from '@chakra-ui/react'
import { useState } from 'react'

interface InfoData {
    id: number
    title: string
    image: string
    description: string
}

const infoData: InfoData[] = [
    { 
        id: 1, 
        title: '膽固醇\n超標', 
        image: '/images/new/info_1.webp',
        description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。'
    },
    { 
        id: 2, 
        title: '中央肥胖\n脂肪肝', 
        image: '/images/new/info_2.webp',
        description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。'
    },
    { 
        id: 3, 
        title: '皮膚暗啞\n容易脫髮', 
        image: '/images/new/info_3.webp',
        description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。'
    },
    { 
        id: 4, 
        title: '經常容易\n覺得疲倦', 
        image: '/images/new/info_4.webp',
        description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。'
    }
]

function Info() {
    const [selectedInfo, setSelectedInfo] = useState<number>(1)

    return (
        <Box
            position="relative"
            w="100%"
            minH={{ base: "163vw", sm: "163vw", md: "75vw", lg: "50vw", xl: "45vw" }}
            bgColor="#4E8C36"
            zIndex={3}
            overflow="hidden"
            justifyItems={'center'}
        >
            <Stack alignItems={'center'} gap={{ base: 4, sm: 4, md: 6, lg: 8, xl: 8 }}>
                <Image 
                    src='/images/new/info_title.webp'
                    w={{ base: '90vw', sm: '90vw', md: '34vw', lg: '22vw', xl: '22vw' }}
                    mt={'50px'}
                />

                <Flex
                    gap={{ base: 2, sm: 2, md: 3, lg: 4, xl: 4 }}
                    flexWrap="wrap"
                    justifyContent="center"
                    px={{ base: 4, sm: 4, md: 0, lg: 0, xl: 0 }}
                >
                    {infoData.map((info) => (
                        // buttons
                        <Box
                            key={info.id}
                            w={{ base: '42vw', sm: '42vw', md: '18vw', lg: '12vw', xl: '8vw' }}
                            h={{ base: '20vw', sm: '20vw', md: '9vw', lg: '6vw', xl: '5vw' }}
                            cursor="pointer"
                            onClick={() => setSelectedInfo(info.id)}
                            bg={selectedInfo === info.id ? '#3D6741' : '#D4D4D4'}
                            border="4px solid #99BF35"
                            borderRadius={{ base: '20px', sm: '20px', md: '18px', lg: '16px', xl: '14px' }}
                            display="flex"
                            alignItems="center"
                            justifyContent="center"
                            textAlign="center"
                            className="font-melle font-xbold"
                            fontSize={{ base: '4vw', sm: '4vw', md: '1.8vw', lg: '1.2vw', xl: '1vw' }}
                            color={selectedInfo === info.id ? '#FFFFFF' : '#333333'}
                            whiteSpace="pre-line"
                            lineHeight="1.2"
                            transition="all 0.3s ease"
                            px={2}
                        >
                            {info.title}
                        </Box>
                    ))}
                </Flex>

                <Box
                    w={{ base: '85vw', sm: '85vw', md: '60vw', lg: '45vw', xl: '40vw' }}
                    bg="white"
                    borderRadius="20px"
                    overflow="hidden"
                    mb={{ base: 8, sm: 8, md: 12, lg: 16, xl: 16 }}
                    boxShadow="0 4px 20px rgba(0,0,0,0.15)"
                    border="3px solid #E5E5E5"
                >
                    <Image
                        src={infoData.find(info => info.id === selectedInfo)?.image}
                        w="100%"
                        transition="all 0.3s ease"
                    />
                    <Box p={{ base: 5, sm: 5, md: 6, lg: 8, xl: 8 }}>
                        <Text
                            className="font-melle font-medium"
                            fontSize={{ base: '3.5vw', sm: '3.5vw', md: '1.5vw', lg: '1.1vw', xl: '1vw' }}
                            color="#333333"
                            lineHeight="1.8"
                            textAlign="left"
                        >
                            {infoData.find(info => info.id === selectedInfo)?.description}
                        </Text>
                    </Box>
                </Box>
            </Stack>
        </Box >
    )
}

export default Info;