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: 'Enhancing Accessibility with ARIA in React',
        date: 'June 1, 2025',
        excerpt:
            'Learn how to use ARIA roles, properties, and states to make your React components fully accessible to screen readers and keyboard users.',
        imageUrl: 'https://blookie.io/stock/blogs-1-1.webp',
        href: '#',
    },
    {
        id: 2,
        title: 'Designing Scalable UI with Tailwind CSS',
        date: 'May 20, 2025',
        excerpt:
            'Discover strategies for building a consistent, scalable design system using Tailwind’s utility-first approach, from theming to component abstraction.',
        imageUrl: 'https://blookie.io/stock/blogs-1-2.webp',
        href: '#',
    },
    {
        id: 3,
        title: 'TypeScript Tips: Advanced Typing Patterns',
        date: 'April 15, 2025',
        excerpt:
            'Dive into conditional types, mapped types, and type inference hacks that will level up your TypeScript codebase and improve maintainability.',
        imageUrl: 'https://blookie.io/stock/blogs-1-3.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">Latest from Us</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-3 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>
    );
}