import Image from "next/image";
import styles from "../../styles/Home.module.css";

const Card = ({ data }) => {
  return (
    <>
      {data?.map(({ id, title, description, href, image }) => (
        <a key={id} href={href} className={styles.card}>
          <div className='flex items-center justify-between'>
            <h2>{title}</h2>
            <Image
              src={image}
              width={50}
              height={50}
              objectFit='contain'
              alt='image'
            />
          </div>
          <p className='dark:text-gray-400'>{description}</p>
        </a>
      ))}
    </>
  );
};

export default Card;
