import Card from "@/src/components/lib/elements/Card";
import H2 from "@/src/components/lib/layout/H2";
import Row from "@/src/components/lib/layout/Row";
import Span from "@/src/components/lib/layout/Span";
import Stack from "@/src/components/lib/layout/Stack";
import { DSQL_TBEN_ME_BLOG_POSTS } from "@/src/types/dsql";
import { ArrowUpRight, Clock } from "lucide-react";
import React from "react";

type Props = {
    post: DSQL_TBEN_ME_BLOG_POSTS;
};

export default function BlogPostsListCard({ post }: Props) {
    return (
        <Card
            href={`/blog/${post.slug}`}
            linkProps={{ className: "p-0 !text-white" }}
        >
            <Row className="w-full justify-between flex-nowrap">
                <Stack className="gap-1">
                    <H2>{post.title}</H2>
                    <Span size="large" className="mb-2">
                        {post.excerpt}
                    </Span>
                    <Row>
                        <Clock size={13} opacity={0.4} />
                        <Span size="smaller" variant="faded">
                            {post.date_created?.substring(0, 24)}
                        </Span>
                    </Row>
                </Stack>
                <ArrowUpRight className="min-w-20" size={25} />
            </Row>
        </Card>
    );
}
