import { Metadata } from 'next';
import Link from 'next/link';
import React from 'react';

export const metadata: Metadata = {
    title: 'Blog',
};

const blogs = [
    {
        id: 1,
        image: '/assets/images/blog/image-1.jpg',
        title: 'Excessive sugar is harmful',
        description: 'Sugar consumption can have serious effects on your health if taken in excess. Learn how to reduce it.',
        author: 'Alma Clark',
        profile: '/assets/images/profile-1.jpeg',
        date: '06 May',
        slug: '/blog/1',
    },
    {
        id: 2,
        image: '/assets/images/blog/image-1.jpg',
        title: 'Creative Photography',
        description: 'Photography is not just about capturing pictures, but emotions and stories through your lens.',
        author: 'Alma Clark',
        profile: '/assets/images/profile-2.jpeg',
        date: '06 May',
        slug: '/blog/2',
    },
    {
        id: 3,
        image: '/assets/images/blog/image-1.jpg',
        title: 'Plan your next trip',
        description: 'Traveling helps you explore new cultures, food, and make memories that last a lifetime.',
        author: 'Alma Clark',
        profile: '/assets/images/profile-3.jpeg',
        date: '06 May',
        slug: '/blog/3',
    },
    {
        id: 4,
        image: '/assets/images/blog/image-1.jpg',
        title: 'My latest Vlog',
        description: 'Check out my latest vlog where I share behind-the-scenes of my daily life and adventures.',
        author: 'Alma Clark',
        profile: '/assets/images/profile-4.jpeg',
        date: '06 May',
        slug: '/blog/4',
    },
];

const Blog = () => {
    return (
        <div className="mt-10">
            <h3 className="mb-6 text-xl font-bold md:text-3xl">Blogs</h3>
            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4">
                    {/* ✅ First box: Create New Blog */}
                    <Link href="/create-blog" className="flex items-center justify-center space-y-5 rounded-md border border-dashed border-blue-500 bg-blue-50 p-5 text-center shadow hover:bg-blue-100 transition dark:border-blue-800 dark:bg-blue-900 dark:hover:bg-blue-800">
                        <div>
                            <div className="mb-3 text-5xl text-blue-600 dark:text-white">+</div>
                            <h5 className="text-lg font-semibold text-blue-800 dark:text-white">Create New Blog</h5>
                        </div>
                    </Link>
                {blogs.map((blog) => (
                    <div
                        key={blog.id}
                        className="space-y-4 rounded-md border border-white-light bg-white p-5 shadow-[0px_0px_2px_0px_rgba(145,158,171,0.20),0px_12px_24px_-4px_rgba(145,158,171,0.12)] dark:border-[#1B2E4B] dark:bg-black"
                    >
                        <div className="max-h-56 overflow-hidden rounded-md">
                            <img src={blog.image} alt={blog.title} className="w-full object-cover" />
                        </div>

                        {/* ✅ Description first, then Title */}
                        <h5 className="text-lg font-semibold dark:text-white">{blog.title}</h5>
                        <p className="text-sm text-gray-600 dark:text-gray-400">{blog.description}</p>

                        {/* 
                        <div className="flex items-center">
                            <div className="me-4 overflow-hidden rounded-full bg-white-dark">
                                <img src={blog.profile} className="h-11 w-11 object-cover" alt={blog.author} />
                            </div>
                            <div className="flex-1">
                                <h4 className="mb-1.5 font-semibold dark:text-white">{blog.author}</h4>
                                <p className="text-xs text-gray-500">{blog.date}</p>
                            </div>
                        </div> */}

                        {/* ✅ Read More button */}
                        <div>
                            <Link
                                href={blog.slug}
                                className="inline-block mt-3 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
                            >
                                Read More
                            </Link>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default Blog;