import { Breadcrumb } from '~/components/ui/breadcrumb'
import { Card } from '~/components/ui/card'
import { Carousel } from '~/components/ui/carousel'
import { IconsSocial } from '~/components/ui/social-share'

import { BERITA, CONTENT } from './data'

export const NewsDetailPage = () => {
  const { title, content, featured, slug, author, date, tags } = CONTENT
  return (
    <div className="relative mx-5 sm:mx-10">
      <Card>
        <div className="py-5 sm:px-30">
          <Breadcrumb slug={slug} />
          <h2 className="text-xl font-extrabold text-[#2E2F7C] sm:text-4xl">
            {title}
          </h2>

          {/* next planing create component for this section */}
          <div className="my-5 flex w-full items-center justify-between align-middle">
            <div className="flex items-center gap-2 align-middle">
              <img
                src={'https://placehold.co/50x50.png'}
                alt={title}
                className="h-12 w-12 rounded-full"
              />
              <div>
                <h4 className="text-md">{author}</h4>
                <p className="text-sm">
                  {date.toJSON().slice(0, 10)} . 5 min read{' '}
                </p>
              </div>
            </div>
            <IconsSocial className="ml-auto"></IconsSocial>
          </div>
          {/* end next planing create component for this section */}
          <div className="w-full bg-amber-200">
            <img
              src={featured}
              alt={title}
              className="object-center"
            />
          </div>

          <article
            className="prose prose-stone"
            dangerouslySetInnerHTML={{ __html: content }}
          />
          <div className="flex items-end justify-between border-b-3 border-b-gray-300 py-4">
            <div className="flex flex-col">
              <p className="mb-2">Share this post</p>
              <IconsSocial className="a" />
            </div>
            <div className="flex flex-wrap items-end">
              {tags?.map((tag) => (
                <span
                  key={tag}
                  className="mx-2 rounded bg-gray-300 p-1"
                >
                  {tag}
                </span>
              ))}
            </div>
          </div>

          <div className="mt-5 flex items-center gap-2 align-middle">
            <img
              src={'https://placehold.co/50x50.png'}
              alt={title}
              className="h-12 w-12 rounded-full"
            />
            <div>
              <h4 className="text-md">{author}</h4>
              <p className="text-sm">Job title, Company name</p>
            </div>
          </div>
        </div>
      </Card>

      <Card>
        <Carousel {...BERITA} />
      </Card>
    </div>
  )
}