import {Container, Grid, List, Heading, Image, IconButton, Stack} from "@chakra-ui/react";
import { LuPhone, LuMail } from "react-icons/lu"

export default function Footer() {
    return (
        <Container>
            <Grid templateColumns="repeat(3, 1fr)" gap="6">
                <div>
                    <Heading as="h3">Uporabne povezave</Heading>
                    <List.Root>
                        <List.Item>Povezava 1</List.Item>
                        <List.Item>Povezava 2</List.Item>
                        <List.Item>Povezava 3</List.Item>
                        <List.Item>Povezava 4</List.Item>
                    </List.Root>
                </div>
                <div>
                    <Heading as="h3">PetAdviser</Heading>
                    <List.Root>
                        <List.Item>O nas 1</List.Item>
                        <List.Item>O nas 2</List.Item>
                        <List.Item>O nas 3</List.Item>
                        <List.Item>O nas 4</List.Item>
                    </List.Root>
                </div>
                <div>
                    <Heading as="h3">Vizitka</Heading>
                    <Image src="/logo.svg" alt="Pet Adviser Logo" h="40px" />
                    <Stack direction={{ base: "column", md: "column" }} gap="4">
                        <IconButton variant="outline" aria-label="E-posta" rounded="full">
                            <LuMail />
                            info@petadviser.si
                        </IconButton>
                        <IconButton variant="outline"  aria-label="Telefon" rounded="full">
                            <LuPhone />
                            000 000 000
                        </IconButton>
                    </Stack>
                </div>
            </Grid>
        </Container>
    );
}