"use client";
import { Fragment } from "react";
import Card from "../Card/Card";
import styles from "./CardWrapper.module.css";
const data = [
  {
    id: 1,
    img: "https://picsum.photos/350/300",
    title: "Lorem ipsum dolor",
    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    author: {
      authorName: "John Doe",
      postedDate: "July 20, 2025",
      readTime: "2",
    },
  },
  {
    id: 2,
    img: "https://picsum.photos/350/300",
    title: "Understanding React Hooks",
    content:
      "Hooks let you use state and other React features without writing a class.",
    author: {
      authorName: "Jane Smith",
      postedDate: "July 20, 2025",
      readTime: "4",
    },
  },
  {
    id: 3,
    img: "https://picsum.photos/350/300",
    title: "Mastering JavaScript Closures",
    content:
      "Closures are a fundamental concept that every JavaScript developer should know.",
    author: {
      authorName: "Alex Johnson",
      postedDate: "July 20, 2025",
      readTime: "3",
    },
  },
  {
    id: 4,
    img: "https://picsum.photos/350/300",
    title: "CSS Grid vs Flexbox",
    content:
      "Both CSS Grid and Flexbox are powerful layout systems. Learn when to use each.",
    author: {
      authorName: "Nina Brown",
      postedDate: "July 20, 2025",
      readTime: "5",
    },
  },
  {
    id: 5,
    img: "https://picsum.photos/350/300",
    title: "Building Accessible Web Apps",
    content:
      "Accessibility should be a key focus when building modern web applications.",
    author: {
      authorName: "Mohammed Ali",
      postedDate: "July 20, 2025",
      readTime: "6",
    },
  },
  {
    id: 6,
    img: "https://picsum.photos/350/300",
    title: "Building Accessible Web Apps",
    content:
      "Accessibility should be a key focus when building modern web applications.",
    author: {
      authorName: "Mohammed Ali",
      postedDate: "July 20, 2025",
      readTime: "6",
    },
  },
];

function CardWrapper({ cardData }: any) {
  return (
    <div className={styles.wrapperContainer}>
      {cardData?.map((ele: any) => (
        <Fragment key={ele.id}>
          <Card
            cardTitle={ele.Title}
            cardDescription={ele.Description}
            authorName={ele.Author}
            imgUrl={`http://localhost:1337${ele.Image.url}`}
            postedDate={ele.PostedOn}
            readTime={ele.ReadingTime}
          />
        </Fragment>
      ))}
    </div>
  );
}

export default CardWrapper;
