"use client";

import { Blog } from "@/types/blog";
import { ROUTES } from "@/config/routes";
import Link from 'next/link';

const SingleBlog = ({ blog }: { blog: Blog }) => {
    const { title, image, paragraph, author, tags, publishDate, slug } = blog;

    return (
        <div
            className="wow fadeInUp hover:shadow-lg group relative flex flex-col overflow-hidden rounded-lg bg-white shadow-md duration-300 dark:bg-dark h-full"
            data-wow-delay=".1s"
        >
            <span className="relative block w-full bg-gray-100">
                <img
                    src={image}
                    alt="image"
                    className="object-cover w-full h-40 transition-transform duration-300 group-hover:scale-105 rounded-t-lg"
                />
                <div className="absolute right-4 top-4 z-20 flex flex-wrap gap-1">
                    {tags.map((tag, idx) => (
                        <span
                            key={idx}
                            className="inline-flex items-center justify-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold capitalize text-red-600 shadow-sm"
                        >
                            {tag}
                        </span>
                    ))}
                </div>
            </span>

            <div className="flex flex-col flex-1 p-6 sm:p-8 md:px-6 md:py-8 lg:p-8 xl:px-5 xl:py-8 2xl:p-8">
                <h3 className="flex-0">
                    <Link href={ROUTES.BLOG_DETAIL(slug)}>
                        <span className="mb-2 cursor-pointer block text-lg font-bold text-black hover:text-red-600 dark:text-white dark:hover:text-red-500 sm:text-xl">
                            {title}
                        </span>
                    </Link>
                </h3>

                <p className="mb-5 text-base text-body-color dark:text-gray-300 flex-1">
                    {paragraph}
                </p>

                <div className="flex items-center justify-between mt-auto pt-4 border-t border-gray-200 dark:border-white/10">
                    <div className="flex items-center">
                        <div className="relative h-10 w-10 rounded-full bg-red-600 mr-3 flex items-center justify-center">
                            <span className="text-white text-sm font-bold">V</span>
                        </div>
                        <div>
                            <h4 className="text-sm font-medium text-dark dark:text-white">
                                {author.name}
                            </h4>
                            <p className="text-xs text-body-color">{author.designation}</p>
                        </div>
                    </div>

                    <div className="text-right">
                        <h4 className="text-xs font-medium text-dark dark:text-white mb-0">
                            Ngày
                        </h4>
                        <p className="text-xs text-body-color">{publishDate}</p>
                    </div>
                </div>
            </div>
            <div className="absolute right-0 bottom-0 z-2">
                <svg
                    width="179"
                    height="158"
                    viewBox="0 0 179 158"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        opacity="0.5"
                        d="M75.0002 63.256C115.229 82.3657 136.011 137.496 141.374 162.673C150.063 203.47 207.217 197.755 202.419 167.738C195.393 123.781 137.273 90.3579 75.0002 63.256Z"
                        fill="url(#paint0_linear_70:153)"
                    />
                    <path
                        opacity="0.3"
                        d="M178.255 0.150879C129.388 56.5969 134.648 155.224 143.387 197.482C157.547 265.958 65.9705 295.709 53.1024 246.401C34.2588 174.197 100.939 83.7223 178.255 0.150879Z"
                        fill="url(#paint1_linear_70:153)"
                    />
                    <defs>
                        <linearGradient
                            id="paint0_linear_70:153"
                            x1="69.6694"
                            y1="29.9033"
                            x2="196.108"
                            y2="83.2919"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#FF0000" stopOpacity="0.62" />
                            <stop offset="1" stopColor="#FF0000" stopOpacity="0" />
                        </linearGradient>
                        <linearGradient
                            id="paint1_linear_70:153"
                            x1="165.348"
                            y1="-75.4466"
                            x2="-3.75136"
                            y2="103.645"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#FF0000" stopOpacity="0.62" />
                            <stop offset="1" stopColor="#FF0000" stopOpacity="0" />
                        </linearGradient>
                    </defs>
                </svg>
            </div>
        </div>
    );
};

export default SingleBlog;
