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

function CardWrapper() {
  return (
    <div className={styles.wrapperContainer}>
      {data.map((ele) => (
        <>
          <Card />
        </>
      ))}
    </div>
  );
}

export default CardWrapper;
