import { Box, Text, Heading, DataList, HStack } from '@chakra-ui/react';
import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

export function VolcanoHome() {
    const position = [46.2, -122.18]; // Mt. St. Helens
    const stats = [
        { label: "Elevation", value: "2,539 (m) 8,330 (ft)", helpText: "Volcano Elevation" },
        { label: "Volcano Type", value: "Stratovolcano", helpText: "Volcano Type" },
        { label: "Composition", value: "Basalt to Ryodacite", helpText: "Volcano Composition" },
        { label: "Recent Eruptions", value: "1980, 2004-2008", helpText: "Last Eruption" },
        { label: "Threat Potential", value: "Very High", helpText: "Threat Potential" },
    
    ]

    const historyText = `
    Mount St. Helens, located in the Cascade Range of Washington State, is one of the most
    active and well-known volcanoes in the United States. It famously erupted on May 18, 1980,
    in one of the most significant volcanic events in U.S. history, which caused widespread
    devastation and loss of life. The eruption reduced the mountain’s summit and created a large
    crater. Subsequent dome-building eruptions continued through the 2000s, and the volcano
    remains closely monitored today.
  `;

    return (
        <Box width="100%" px={6} py={2}>
            <Heading textAlign="center" mb={6} size="xl" fontWeight="bold">
                Mount St. Helens - United States CVO
            </Heading>
            
            <Box height="550px" borderRadius="md" overflow="hidden" boxShadow="md" mb={6}>
                <MapContainer center={position} zoom={10} style={{ height: "100%", width: "100%" }}>
                    <TileLayer
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        attribution='&copy; OpenStreetMap contributors'
                    />
                    <Marker position={position}>
                        <Popup>
                            CVO — Home of the volcanoligists
                        </Popup>
                    </Marker>
                </MapContainer>
            </Box>
            
            <HStack align="start" spacing={10} mt={4}>
                <Box width="300px" height="200px" overflowY="auto" p={4} border="1px solid" borderColor="gray.200" borderRadius="md" bg="gray.50" boxShadow="sm">
                    <DataList.Root orientation="horizontal">
                        {stats.map((item) => (
                            <DataList.Item key={item.label}>
                                <DataList.ItemLabel>
                                    {item.label}
                                </DataList.ItemLabel>
                                <DataList.ItemValue>
                                    {item.value}
                                </DataList.ItemValue>
                            </DataList.Item>
                        ))}
                    </DataList.Root>
                </Box>

                <Box flex="1" height="200px" overflowY="auto" p={4} border="1px solid" borderColor="gray.200" borderRadius="md" bg="gray.50" boxShadow="sm">
                    <Heading textAlign="center" pb={2}>Historical Summary</Heading>
                    <Text>
                        { historyText}
                    </Text>
                </Box>
            </HStack>
        </Box>
    );
}