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

type Props = {
    post: DSQL_TBENME_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">
                <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 />
            </Row>
        </Card>
    );
}