import { PLATFORM_ICONS } from "../shared";
import type { EnrichedCalendarPost } from "../../hooks/useCalendarPosts";

const STATUS_DOT: Record<string, string> = {
  Scheduled: "vr-bg-blue-500",
  Published: "vr-bg-emerald-500",
  Draft: "vr-bg-gray-400",
  Failed: "vr-bg-red-500",
  Processing: "vr-bg-amber-500",
  PendingApproval: "vr-bg-orange-500",
  Queued: "vr-bg-purple-500",
};

interface Props {
  post: EnrichedCalendarPost;
  onClick: () => void;
}

export default function CalendarPostTile({ post, onClick }: Props) {
  const icon = PLATFORM_ICONS[post.channelType] || "🌐";
  const dotColor = STATUS_DOT[post.displayStatus] || "vr-bg-gray-400";

  return (
    <button
      onClick={(e) => { e.stopPropagation(); onClick(); }}
      className="vr-w-full vr-flex vr-items-center vr-gap-1.5 vr-px-1.5 vr-py-1 vr-rounded vr-text-left vr-transition-colors hover:vr-bg-gray-100 vr-border-0 vr-bg-transparent vr-cursor-pointer"
      title={`${post.channelName}: ${post.title || "Post"}`}
    >
      <span className="vr-text-xs vr-flex-shrink-0">{icon}</span>
      <span className="vr-flex-1 vr-min-w-0 vr-text-xs vr-text-gray-700 vr-truncate vr-leading-tight">
        {post.title || "Post"}
      </span>
      <span className={`vr-w-1.5 vr-h-1.5 vr-rounded-full vr-flex-shrink-0 ${dotColor}`} title={post.displayStatus} />
    </button>
  );
}