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

interface ResourceCardProps {
  url: string;
  title: string;
  mediaType: string;
  mediaText: string;
  userName?: string;
  tag?: string;
}
const mediaIcons = (mediaType: string) => {
  switch (mediaType) {
    case "video":
      return <PlayIcon />;
    case "podcast":
      return <PodcastIcon />;
    default:
      return "";
  }
};
const ResourceCard = ({
  url,
  title,
  mediaType,
  mediaText,
  userName,
  tag,
}: ResourceCardProps) => {
  const mediaIcon = mediaIcons(mediaType);
  return (
    <Card className="group/resource-card hover:bg-mono-50 h-full rounded-lg cursor-pointer animate-hover border border-mono-100">
      <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-base line-clamp-2 font-semibold text-zinc-700 animate-hover group-hover/resource-card:text-primary-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>
    </Card>
  );
};

export { ResourceCard, ResourceCardProps };
