import CustomImage from '@/helper/customImage';
import { titleToSlug } from '@/helper/titleToSlug';
import Link from 'next/link';
import { useState } from 'react';


const ArticleCard = ({ data }: { data: any }) => {
    const [cateList, setCateList] = useState(data.categories || []);

    return (
        <>
            {cateList.length > 0 && cateList.slice(0, 3).map((category: any) => (
                <ArticleItem key={category.id} post={category} />
            ))}
        </>
    );
};

export default ArticleCard;


export const ArticleItem = ({ post }: { post: any }) => {
    return (
        <Link
            key={post.id}
            href={`/ayodhyablog/${titleToSlug(post.metaTitle)}/${post.id}`}
            className='col-10 recent-card'
        >
            <div className="card">
                <div className="card-header">
                    <CustomImage
                        src={post.banner}
                        alt={post.title}
                        className="card-image"
                    />
                </div>
                <div className="card-body">
                    <h4 className="card-title">{post.title}</h4>
                    {/* <p
                        className="card-content"
                        dangerouslySetInnerHTML={{ __html: truncateHtml(post.content, 250) }}
                    /> */}
                    <p>{post?.metaDescription}</p>
                    {/* <div className="user">
                        <img
                            src={'/AY1.png'}
                            alt={'admin'}
                            className="user-avatar"
                        />
                        <div className="user-info">
                            <h5>{moment(post.publishedDate).format("MMM Do YY")}</h5>
                            <small>{post.status}</small>
                        </div>
                    </div> */}
                    {/* <span className="tag tag-teal">{post.categories}</span> */}
                </div>
                {/* <div className="card-footer">
                    <a href={post.facebookLink} target="_blank" rel="noopener noreferrer">Facebook</a>
                    <a href={post.instagramLink} target="_blank" rel="noopener noreferrer">Instagram</a>
                    <a href={post.youtubeLink} target="_blank" rel="noopener noreferrer">YouTube</a>
                </div> */}
            </div>
        </Link>
    );
};