import {
  Eye,
  MessageCircle,
} from "lucide-react";

import { Profile } from "../../molecules";
import { Badge } from "../../atoms";
import { BookmarkPlusIcon, DownloadIcon, HeartIcon, IosShareIcon } from "../../../icons";

type ResourceProps = {
  title: string;
  id: string;
  content: string;
  viewsCount: number;
  commentsCount: number;
  userName: string;
  profileImage: string;
  subheader?: string;
  tags?: string[];
  thumbnail?: string,
  featuredImg?: string
};

const Resource = ({
  title,
  id,
  content,
  userName,
  profileImage,
  viewsCount,
  featuredImg,
  thumbnail,
  tags,
  commentsCount,
  subheader,
}: ResourceProps) => {
  return (
    <article data-article-id={id}>
      <header>
        <section className="pb-9 flex flex-col gap-1.5">
          <div className="pt-6 font-bold text-[28px] leading-[44px] text-gray-900">
            {title}
          </div>
          {tags && tags?.length >= 1 && <div className="flex gap-2 flex-wrap">
            {tags?.map((tag: string, index: number) => <Badge key={`tag-${index}`} variant="lightgray" size="md">{tag}</Badge>)}
          </div>}
        </section>
        <section className="pb-9">
          <Profile
            profileImage={profileImage}
            userName={userName}
            subheader={subheader}
          />
        </section>
        <section className="mb-9 flex items-center justify-between pt-3 pb-2.5 text-gray-600 border-t border-b border-mono-200">
          <div className="flex gap-5">
            <span className="flex text-sm font-inter items-center gap-2">
              <Eye size="12px" />
              {viewsCount}
            </span>
            {commentsCount >= 1 && <>
            <span className="flex text-sm font-iner items-center gap-2">
              <MessageCircle size="12px" />
              {commentsCount}
              </span>
            </>}
          </div>
          <div className="flex gap-4 [&>div]:">
            <div className="w-8 flex justify-center items-baseline">
              <IosShareIcon />
            </div>
            <div className="w-8 flex justify-center items-baseline">
              <HeartIcon />
            </div>
            <div className="w-8 flex justify-center items-baseline">
              <DownloadIcon />
            </div>
            <div className="w-8 flex justify-center items-baseline">
              <BookmarkPlusIcon />
            </div>
          </div>
        </section>
      </header>
      {featuredImg && <section className="aspect-video pb-6 flex">
        <img src={featuredImg} alt="alt for article" className="object-cover w-full" />
      </section>}
      <div className="" dangerouslySetInnerHTML={{__html: content}}></div>
    </article>
  );
};

export { Resource, ResourceProps };
