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

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

type ResourceProps = {
  title: string;
  content: string;
  viewsCount: number;
  commentsCount: number;
  userName: string;
  profileImage: string;
  subheader?: string;
};

const Resource = ({
  title,
  content,
  userName,
  profileImage,
  viewsCount,
  commentsCount,
  subheader,
}: ResourceProps) => {
  return (
    <div>
      <header>
        <section className="pb-9">
          <div className="pt-6 font-bold text-[28px] leading-[44px] text-gray-900">
            {title}
          </div>
        </section>
        <section className="pb-9">
          <Profile
            profileImage={profileImage}
            userName={userName}
            subheader={subheader}
          />
        </section>
        <section className="mb-9 flex items-center justify-between py-3 text-gray-600 border-t border-b border-mono-200">
          <div className="flex gap-6">
            <span className="flex text-xs items-center gap-2">
              <Eye size="12px" />
              {viewsCount}
            </span>
            <span className="flex text-xs items-center gap-2">
              <MessageCircle size="12px" />
              {commentsCount}
            </span>
          </div>
          <div className="flex gap-4">
            <IosShareIcon />
            <HeartIcon />
            <DownloadIcon />
            <BookmarkPlusIcon />
          </div>
        </section>
      </header>
      <article className="">{content}</article>
    </div>
  );
};

export { Resource, ResourceProps };
