import { Avatar, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
 
interface Post {
    id: number;
    title: string;
    date: string;
    imageUrl: string;
    href: string;
    author: string;
    avatar: string;
    category: string;
    categoryUrl: string;
}
 
const posts: Post[] = [
    {
        id: 1,
        title: 'Maximizing Small Spaces with Stylish Multifunctional Furniture Ideas',
        date: '4 days ago',
        imageUrl: 'https://blookie.io/stock/blogs-4-1.webp',
        href: '#',
        author: 'Isabella G.',
        avatar: 'https://blookie.io/stock/person1.webp',
        category: 'Furniture',
        categoryUrl: '#',
    },
    {
        id: 2,
        title: 'Color Trends Uncovered: Choosing the Perfect Palette for Every Room',
        date: '2 months ago',
        imageUrl: 'https://blookie.io/stock/blogs-4-2.webp',
        href: '#',
        author: 'Marco B.',
        avatar: 'https://blookie.io/stock/person2.webp',
        category: 'Color',
        categoryUrl: '#',
    },
    {
        id: 3,
        title: 'Lighting Essentials: Transforming Your Home with Ambient Lighting',
        date: '6 months ago',
        imageUrl: 'https://blookie.io/stock/blogs-4-3.webp',
        href: '#',
        author: 'Ronald H.',
        avatar: 'https://blookie.io/stock/person3.webp',
        category: 'Lighting',
        categoryUrl: '#',
    },
    {
        id: 4,
        title: 'Textural Harmony: Tips for Layering Fabrics and Materials in Interiors',
        date: '6 months ago',
        imageUrl: 'https://blookie.io/stock/blogs-4-4.webp',
        href: '#',
        author: 'Ashley C.',
        avatar: 'https://blookie.io/stock/person4.webp',
        category: 'Textures',
        categoryUrl: '#',
    },
];
 
export default function BlogSection() {
    return (
        <section className="py-16 lg:py-32">
            <div className="mx-auto w-full max-w-2xl px-6 lg:max-w-7xl">
                <div className="mx-auto max-w-xl text-center">
                    <h2 className="text-3xl/tight font-semibold tracking-tight sm:text-4xl/tight">Design Inspirations</h2>
                    <p className="text-muted-foreground mt-4 text-base/7 sm:text-lg/8">
                        Aliquet adipiscing lectus praesent cras sed quis lectus egestas.
                    </p>
                </div>
                <div className="mt-12 grid gap-8 lg:grid-cols-2">
                    {posts.map((post: Post) => (
                        <Card key={post.id} className="items-center lg:flex-row">
                            <div className="w-full px-6 lg:w-4/12 lg:pr-0">
                                <img
                                    src={post.imageUrl}
                                    alt={post.title}
                                    className="h-48 w-full rounded-lg object-cover object-center shadow-sm lg:aspect-auto"
                                />
                            </div>
                            <CardContent className="flex-1">
                                <Badge asChild>
                                    <a href={post.categoryUrl}>{post.category}</a>
                                </Badge>
                                <a href={post.href} className="mt-4 inline-block text-lg font-semibold tracking-tight hover:underline">
                                    {post.title}
                                </a>
                                <div className="mt-6 flex items-center justify-between text-sm/6">
                                    <div className="flex items-center gap-3">
                                        <Avatar>
                                            <AvatarImage src={post.avatar} />
                                        </Avatar>
                                        <span className="font-medium">{post.author}</span>
                                    </div>
                                </div>
                            </CardContent>
                        </Card>
                    ))}
                </div>
            </div>
        </section>
    );
}