import { createClient } from '@/utils/supabase/server';
import { Container, Button, Card, Heading, Image, Text, SimpleGrid, GridItem } from "@chakra-ui/react"

export default async function Articles() {
    const supabase = await createClient();
    const {data: articles} = await supabase
        .from("articles")
        .select()
        .order("published_at", {ascending: false})
        .limit(8);

    return (
        <Container>
            <Heading size="4xl" as="h2">Zadnje novice iz sveta malih živali</Heading>
            {articles.length === 0 ? <Text>Ni vsebin</Text> : <SimpleGrid columns={4} gap="40px">
                    {articles.map((article) => (
                        <Card.Root key={article.id} maxW="sm" overflow="hidden">
                            <Image
                                src={article.image_url}
                                alt="Green double couch with wooden legs"
                            />
                            <Card.Body gap="2">
                                <Card.Title>{article.title}</Card.Title>
                                <Card.Description>
                                    {article.name}
                                </Card.Description>
                                <small className="text-gray-500">
                                    {new Date(article.published_at).toLocaleString("sl-SI", {weekday: "long", year: "numeric", month: "long", day: "numeric"})}
                                </small>
                            </Card.Body>
                            <Card.Footer gap="2">
                                <Button variant="outline">Ogled objave</Button>
                            </Card.Footer>
                        </Card.Root>
                    ))}
                </SimpleGrid>}
        </Container>
    )
}