"use client"; import { memo } from "react"; import Image from "next/image"; import CardStack from "@/components/cardStack/CardStack"; import Tag from "@/components/shared/Tag"; import MediaContent from "@/components/shared/MediaContent"; import OverlayArrowButton from "@/components/shared/OverlayArrowButton"; import { cls, shouldUseInvertedText } from "@/lib/utils"; import { useTheme } from "@/providers/themeProvider/ThemeProvider"; import type { LucideIcon } from "lucide-react"; import type { ButtonConfig, CardAnimationType, TitleSegment } from "@/components/cardStack/types"; import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; type BlogCard = { id: string; category: string; title: string; excerpt: string; imageSrc: string; imageAlt?: string; authorName?: string; authorAvatar?: string; date?: string; onBlogClick?: () => void; }; interface BlogCardThreeProps { blogs: BlogCard[]; carouselMode?: "auto" | "buttons"; uniformGridCustomHeightClasses?: string; animationType: CardAnimationType; title: string; titleSegments?: TitleSegment[]; description: string; tag?: string; tagIcon?: LucideIcon; buttons?: ButtonConfig[]; textboxLayout: TextboxLayout; useInvertedBackground: InvertedBackground; ariaLabel?: string; className?: string; containerClassName?: string; cardClassName?: string; cardContentClassName?: string; categoryTagClassName?: string; cardTitleClassName?: string; excerptClassName?: string; authorContainerClassName?: string; authorAvatarClassName?: string; authorNameClassName?: string; dateClassName?: string; mediaWrapperClassName?: string; mediaClassName?: 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; } interface BlogCardItemProps { blog: BlogCard; useInvertedBackground: "noInvert" | "invertDefault"; cardClassName?: string; cardContentClassName?: string; categoryTagClassName?: string; cardTitleClassName?: string; excerptClassName?: string; authorContainerClassName?: string; authorAvatarClassName?: string; authorNameClassName?: string; dateClassName?: string; mediaWrapperClassName?: string; mediaClassName?: string; } const BlogCardItem = memo(({ blog, useInvertedBackground, cardClassName = "", cardContentClassName = "", categoryTagClassName = "", cardTitleClassName = "", excerptClassName = "", authorContainerClassName = "", authorAvatarClassName = "", authorNameClassName = "", dateClassName = "", mediaWrapperClassName = "", mediaClassName = "", }: BlogCardItemProps) => { const theme = useTheme(); const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); return (

{blog.title}

{blog.excerpt}

{(blog.authorName || blog.date) && (
{blog.authorAvatar && ( {blog.authorName )} {blog.authorAvatar ? (
{blog.authorName && (

{blog.authorName}

)} {blog.date && (

{blog.date}

)}
) : ( <> {blog.authorName && (

{blog.authorName}

)} {blog.date && (

{blog.date}

)} )}
)}
); }); BlogCardItem.displayName = "BlogCardItem"; const BlogCardThree = ({ blogs, carouselMode = "buttons", uniformGridCustomHeightClasses = "min-h-none", animationType, title, titleSegments, description, tag, tagIcon, buttons, textboxLayout, useInvertedBackground, ariaLabel = "Blog section", className = "", containerClassName = "", cardClassName = "", cardContentClassName = "", categoryTagClassName = "", cardTitleClassName = "", excerptClassName = "", authorContainerClassName = "", authorAvatarClassName = "", authorNameClassName = "", dateClassName = "", mediaWrapperClassName = "", mediaClassName = "", textBoxTitleClassName = "", textBoxTitleImageWrapperClassName = "", textBoxTitleImageClassName = "", textBoxDescriptionClassName = "", gridClassName = "", carouselClassName = "", controlsClassName = "", textBoxClassName = "", textBoxTagClassName = "", textBoxButtonContainerClassName = "", textBoxButtonClassName = "", textBoxButtonTextClassName = "", }: BlogCardThreeProps) => { return ( {blogs.map((blog) => ( ))} ); }; BlogCardThree.displayName = "BlogCardThree"; export default BlogCardThree;