import { ArrowRight } from 'lucide-react';
 
interface Post {
    id: number;
    title: string;
    date: string;
    excerpt: string;
    imageUrl: string;
    href: string;
}
 
const posts: Post[] = [
    {
        id: 1,
        title: '5 Ways to Maximize Natural Light in Any Room',
        date: 'June 1, 2025',
        excerpt:
            'Discover simple yet effective interior design strategies to bring more natural light into your living spaces and create a brighter atmosphere. From optimizing window placements to choosing the right color palette and reflective surfaces, these tips will help you transform even the darkest corners of your home.',
        imageUrl: 'https://blookie.io/stock/blogs-2-1.webp',
        href: '#',
    },
    {
        id: 2,
        title: 'Creating Cohesive Spaces With Color and Texture',
        date: 'May 20, 2025',
        excerpt:
            'Learn how to combine color palettes and layered textures to create interiors that feel polished, inviting, and professionally designed. We explore techniques for balancing bolding hues with subtle neutrals, mixing materials, and using contrast to tie rooms together seamlessly.',
        imageUrl: 'https://blookie.io/stock/blogs-2-2.webp',
        href: '#',
    },
];
 
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">Our Latest News</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 lg:gap-12">
                    {posts.map((post: Post) => (
                        <div key={post.id} className="flex flex-col items-start">
                            <img src={post.imageUrl} alt={post.title} className="aspect-[16/9] w-full rounded-xl object-cover object-center" />
                            <div className="mt-6 flex-1">
                                <div className="text-muted-foreground text-xs font-medium">{post.date}</div>
                                <h3 className="mt-2 text-lg font-semibold tracking-tight">{post.title}</h3>
                                <p className="text-muted-foreground mt-2 line-clamp-2 text-sm/6">{post.excerpt}</p>
                            </div>
                            <a
                                href={post.href}
                                className="text-primary mt-6 inline-flex items-center gap-2 text-sm font-medium transition-opacity hover:opacity-85"
                            >
                                Read More <ArrowRight className="size-4" />
                            </a>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}