import React from 'react';

interface EventCardProps {
  url: string;
  image: string;
  title: string;
  project: {
    name: string;
    url: string;
  };
  date: string;
  time: string;
  place: string;
  darkColor?: string;
  lightColor?: string;
}

const EventCard: React.FC<EventCardProps> = ({
  url,
  image,
  title,
  project,
  date,
  darkColor,
  time,
  place,
  lightColor
}) => {
  return (
    <article>
      <figure className="overlay overlay-1 hover-scale  mb-5">
        <a href={url || '#'}>
          <img src={image} alt={title} />
        </a>
      </figure>
      <div className="post-header">
        <div className="post-category -text-line">
          <a
            style={{ color: darkColor }}
            href={project?.url || '#'}
            className="hover tw-uppercase tw-text-sm tw-font-semibold tw-font-ibm"
            rel="category"
          >
            • {project?.name}
          </a>
        </div>
        <h2 className="post-title h3 mt-1 mb-2">
          <a
            className="tw-text-main-dark hover:tw-text-main-dark hover:tw-opacity-75 tw-font-ibm tw-font-semibold tw-text-ls md:tw-text-xl"
            href={url || '#'}
          >
            {title}
          </a>
        </h2>
      </div>
      <div className="post-footer ">
        <div className="post-meta mb-0 tw-flex tw-gap-2 tw-items-center tw-justify-between">
          <p className="post-date tw-flex tw-items-center tw-gap-1">
            <i style={{ color: darkColor }} className="uil uil-calendar-alt tw-text-sm"></i>
            <span className="tw-font-inter tw-font-semibold tw-text-sm tw-text-secondary-dark">{date}</span>
          </p>
          {/* <p className="post-date tw-flex tw-items-center tw-gap-1">
                        <i style={{ color: darkColor }} className="uil uil-clock tw-text-base"></i>
                        <span className="tw-font-inter tw-font-semibold tw-text-sm tw-text-secondary-dark">{time}</span>
                    </p>
                    <p className="post-date tw-flex tw-items-center tw-gap-1">
                        <i style={{ color: darkColor }} className="uil uil-map-marker tw-text-base"></i>
                        <span className="tw-font-inter tw-font-semibold tw-text-sm tw-text-secondary-dark">{place}</span>
                    </p> */}
        </div>
      </div>
    </article>
  );
};

export default EventCard;