import React from "react";
import { Card, CardContent, CardFooter, CardHeader, Like } from "../../atoms";
import { PlayIcon, PodcastIcon } from "../../../icons";

interface MarketPlaceCardProps {
  url: string;
  title: string;
  mediaType: string;
  mediaText: string;
  userName?: string;
  tag?: string;
  onClickLike?: () => void;
  onClick?: () => void;
}
const mediaIcons = (mediaType: string) => {
  switch (mediaType) {
    case "video":
      return <PlayIcon />;
    case "podcast":
      return <PodcastIcon />;
    default:
      return "";
  }
};
const MarketPlaceCard = ({
  url,
  title,
  mediaType,
  mediaText,
  userName,
  tag,
  onClickLike,
  onClick,
}: MarketPlaceCardProps) => {
  const mediaIcon = mediaIcons(mediaType);
  return (
    <Card
      onClick={() => {
        onClick && onClick();
      }}
      className="md:max-w-72.75 group/resource-card hover:bg-mono-50 rounded-lg cursor-pointer animate-hover"
    >
      <CardHeader>
        <div className="relative">
          <img
            className={`rounded h-full w-full`}
            src={url}
            alt="resource-card-image"
          />
          {mediaIcon && (
            <div className="absolute left-1 z-20 bottom-1 h-8 w-8 p-1 bg-black bg-opacity-50 text-mono-25 rounded">
              {mediaIcon}
            </div>
          )}
          <div className="absolute group-hover/resource-card:bg-transparent  animate-hover bg-[#d3d3d3]/20 top-0 h-full w-full"></div>
        </div>
      </CardHeader>
      <CardContent className="flex flex-col space-y-3 mt-4">
        <h3 className="text-lg line-clamp-2 font-semibold text-zinc-700 animate-hover group-hover/resource-card:text-green-500">
          {title}
        </h3>
        <p className="text-base font-medium text-zinc-500 group-hover/resource-card:text-mono-900 animate-hover">
          {tag}
        </p>
        <p className="text-sm font-medium text-zinc-300">
          {mediaText}
          {userName && <span className="text-zinc-900">&nbsp;{userName}</span>}
        </p>
      </CardContent>
      <CardFooter>
        <Like
          text="100% (20)"
          className="mt-3 text-gray-500"
          textClassName="text-[13px]"
          onClick={() => onClickLike && onClickLike()}
        />
      </CardFooter>
    </Card>
  );
};

export { MarketPlaceCard, MarketPlaceCardProps };
