import Link from 'next/link';
import type { PlazaPost } from '@/types/plaza';
import { FollowButton } from '@/components/user/FollowButton';
import { formatCount, formatRelativeTime } from '@/lib/format';

export function PostMeta({ post }: { post: PlazaPost }) {
  return (
    <div className="flex flex-wrap items-center justify-between gap-4 border-b border-[#d6d0c3] pb-5">
      <div>
        <p className="text-sm text-[#68716c]">
          {post.category.icon} {post.category.name} · {formatRelativeTime(post.published_at)}
        </p>
        <h1 className="mt-2 text-2xl font-bold leading-tight text-[#17221d] md:text-3xl">
          {post.title}
        </h1>
        {post.summary ? <p className="mt-3 text-[#4a5751]">{post.summary}</p> : null}
      </div>
      <div className="flex items-center gap-3">
        <div>
          <Link
            href={`/u/${post.author.slug}`}
            className="font-semibold text-[#17221d] hover:text-[#2f6f57]"
          >
            {post.author.display_name}
          </Link>
          <p className="text-xs text-[#8a928c]">@{post.author.slug}</p>
        </div>
        <FollowButton slug={post.author.slug} />
      </div>
      <div className="flex w-full gap-4 text-sm text-[#4a5751] md:w-auto">
        <span>👍 {formatCount(post.stats.like_count)}</span>
        <span>👁 {formatCount(post.stats.view_count)}</span>
        <span>💬 {formatCount(post.stats.comment_count)}</span>
      </div>
    </div>
  );
}