"use client";

import React, { useState } from "react";
import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react";
import TextBox from "@/components/Textbox";

export interface BlogCardThreeProps {
  blogs: Array<{
    id: string;
    category: string;
    title: string;
    excerpt: string;
    imageSrc: string;
    imageAlt?: string;
    authorName: string;
    authorAvatar: string;
    date: string;
    onBlogClick?: () => void;
  }>;
  carouselMode?: "auto" | "buttons";
  uniformGridCustomHeightClasses?: string;
  animationType?: string;
  title?: string;
  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
  description?: string;
  tag?: string;
  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
  useInvertedBackground?: boolean;
  ariaLabel?: string;
  className?: string;
  containerClassName?: string;
  cardClassName?: string;
  imageWrapperClassName?: string;
  imageClassName?: string;
  categoryClassName?: string;
  cardTitleClassName?: string;
  excerptClassName?: string;
  authorContainerClassName?: string;
  authorAvatarClassName?: string;
  authorNameClassName?: string;
  dateClassName?: string;
  textBoxTitleClassName?: string;
  textBoxTitleImageWrapperClassName?: string;
  textBoxTitleImageClassName?: string;
  textBoxDescriptionClassName?: string;
  gridClassName?: string;
  carouselClassName?: string;
  controlsClassName?: string;
  textBoxClassName?: string;
  textBoxTagClassName?: string;
  textBoxButtonContainerClassName?: string;
  textBoxButtonClassName?: string;
  textBoxButtonTextClassName?: string;
}

const BlogCardThree: React.FC<BlogCardThreeProps> = ({
  blogs,
  carouselMode = "buttons",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
  titleSegments,
  description,
  tag,
  tagAnimation,
  buttons,
  buttonAnimation,
  textboxLayout = "default",  useInvertedBackground = false,
  ariaLabel = "Blog section",  className = "",  containerClassName = "",  cardClassName = "",  imageWrapperClassName = "",  imageClassName = "",  categoryClassName = "",  cardTitleClassName = "",  excerptClassName = "",  authorContainerClassName = "",  authorAvatarClassName = "",  authorNameClassName = "",  dateClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = "" }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const blogCards = blogs.map((blog) => (
    <div
      key={blog.id}
      className={`flex flex-col h-full rounded-lg overflow-hidden bg-card hover:shadow-lg transition-shadow cursor-pointer ${
        cardClassName || ""
      }`}
      onClick={blog.onBlogClick}
    >
      <div className={`relative overflow-hidden bg-foreground/5 ${imageWrapperClassName}`}>
        <img
          src={blog.imageSrc}
          alt={blog.imageAlt || blog.title}
          className={`w-full h-60 object-cover hover:scale-105 transition-transform duration-300 ${
            imageClassName || ""
          }`}
        />
        <button className="absolute top-4 right-4 bg-primary-cta/90 hover:bg-primary-cta p-2 rounded-full transition-colors">
          <ArrowRight className="w-4 h-4 text-foreground" />
        </button>
      </div>

      <div className="flex-1 p-6 flex flex-col gap-3">
        <span className={`text-xs font-semibold text-primary-cta uppercase ${
          categoryClassName || ""
        }`}>
          {blog.category}
        </span>

        <h3 className={`text-lg font-semibold text-foreground line-clamp-2 ${
          cardTitleClassName || ""
        }`}>
          {blog.title}
        </h3>

        <p className={`text-sm text-foreground/70 line-clamp-2 flex-1 ${
          excerptClassName || ""
        }`}>
          {blog.excerpt}
        </p>

        <div className={`flex items-center gap-3 pt-4 border-t border-foreground/10 ${
          authorContainerClassName || ""
        }`}>
          <img
            src={blog.authorAvatar}
            alt={blog.authorName}
            className={`w-8 h-8 rounded-full object-cover ${
              authorAvatarClassName || ""
            }`}
          />
          <div className="flex-1 min-w-0">
            <p className={`text-sm font-medium text-foreground truncate ${
              authorNameClassName || ""
            }`}>
              {blog.authorName}
            </p>
            <p className={`text-xs text-foreground/60 ${dateClassName || ""}`}>
              {blog.date}
            </p>
          </div>
        </div>
      </div>
    </div>
  ));

  return (
    <div
      className={`w-full py-20 ${
        useInvertedBackground ? "bg-background/50" : ""
      } ${containerClassName}`}
      aria-label={ariaLabel}
    >
      {title && (
        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName || ""}`}>
          <TextBox
            title={title}
            titleSegments={titleSegments}
            description={description || ""}
            tag={tag}
            tagAnimation={tagAnimation}
            buttons={buttons}
            buttonAnimation={buttonAnimation}
            textboxLayout={textboxLayout || "default"}
            titleClassName={textBoxTitleClassName}
            descriptionClassName={textBoxDescriptionClassName}
            tagClassName={textBoxTagClassName}
            buttonContainerClassName={textBoxButtonContainerClassName}
            buttonClassName={textBoxButtonClassName}
            buttonTextClassName={textBoxButtonTextClassName}
          />
        </div>
      )}

      <div className="max-w-content-width mx-auto px-4">
        <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 ${gridClassName}`}>
          {blogCards}
        </div>
      </div>
    </div>
  );
};

export default BlogCardThree;
