import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { ArrowRight } from "lucide-react";

const CardBlog = ({
    item,
}: {
    item: {
        id: number;
        date: string;
        title: string;
        title_page: string;
        description: string;
        image: string;
        alt_image: string;
    };
}) => {
    return (
        <Card className="p-4">
            <img src={item.image} alt={item.alt_image} className="rounded-md" />
            <CardContent className="p-4">
                <Badge className="bg-red-600 text-white">{item.date}</Badge>
                <p className="text-gray-500 text-sm mt-2">{item.date}</p>
                <h3 className="text-md font-semibold mt-2 text-gray-900">
                    {item.title}
                </h3>
                <p className="text-sm text-gray-600 mt-2">{item.description}</p>
                <Button variant="link" className="text-red-600 mt-2">
                    Baca Selengkapnya <ArrowRight className="ml-2 w-4 h-4" />
                </Button>
            </CardContent>
        </Card>
    );
};

export default CardBlog;