import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  Button,
  ModalFooter,
  Center,
  Text,
  Box
} from '@chakra-ui/react';

type Props = {
  isOpen: boolean;
  onClose: () => void;
};

const ProductComparisonModal = ({ isOpen, onClose }: Props) => {
  return (
    <Modal isOpen={isOpen} onClose={onClose} size="xl" isCentered>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader borderBottom="1px solid #eee">Perbandingan Produk</ModalHeader>
        <ModalCloseButton />
        
        <ModalBody py={10}>
            <Center flexDirection="column">
                <Box fontSize="4xl" mb={4}>Test</Box>
                <Text fontWeight="bold" fontSize="lg">Modal Berhasil Terbuka!</Text>
                <Text fontSize="sm" color="gray.500" mt={2}>
                    Fitur komparasi produk akan muncul di sini nanti.
                </Text>
            </Center>
        </ModalBody>

        <ModalFooter borderTop="1px solid #eee">
            <Button colorScheme="red" onClick={onClose}>Tutup</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default ProductComparisonModal;