import { format } from "date-fns";
import { Avatar, Badge } from "../../atoms"

type NewsArticleTeaserProps = {
  thumbnail?: string,
  title: string,
  description?: string,
  tags?: string[],
  author?: string,
  articledate?: string
}

const NewsArticleTeaser = (props: NewsArticleTeaserProps) => {
  const { thumbnail, description, author, articledate, title, tags } = props;

  return <div className="py-9 flex flex-row justify-center items-center">
    <div className="flex flex-col flex-1 gap-[50px] justify-between w-8/12 pr-4">
      <div className="flex flex-col gap-2.5">
        <div className="flex gap-1.5 items-center">
          <Avatar size="sm" image={thumbnail} />
          <span className="text-sm text-mono-800 font-manrope-medium pl-1.5">{author}</span>
          {articledate && <><span className="text-mono-400 text-xs font-manrope-medium">•</span>
            <span className="text-mono-400 text-xs font-manrope-medium">{format(new Date(articledate), "dd MMM")}</span></>}
        </div>
        <h2 className="font-manrope-semibold text-xl text-mono-800">{title}</h2>
        <p className="-mt-0.5 text-mono-500 font-manrope-medium text-base line-clamp-2">{description}</p>
      </div>
      <div className="flex gap-2 items-center">{tags && tags?.map((tag: string) => <Badge size="md">Stethoscope</Badge>)}<span className="text-mono-500 text-xs font-manrope-medium">5 min video</span><span className="text-mono-400 text-xs font-manrope-medium">•</span><span className="text-mono-400 text-xs font-manrope-medium">Selected for you</span></div>
    </div>
    <div className="w-4/12 flex justify-end">
      <img className="w-[120px] h-[112px] rounded-lg" src={thumbnail} alt="news article" />
    </div>
  </div>
}

export { NewsArticleTeaser, NewsArticleTeaserProps }
