"use client";

import { cn } from "@/lib/utils";
import { useFormattedDate } from "@/hooks/use-formatted-date";
import { ArrowLeft } from "lucide-react";
import { ReactNode } from "react";

interface PostMetaInfoProps {
  publishDate: string;
  publishDateLabel: string;
  platformName: string;
  platformLabel: string;
  platformIcon?: ReactNode;
  className?: string;
}

export function PostMetaInfo({
  publishDate,
  publishDateLabel,
  platformName,
  platformLabel,
  platformIcon,
  className,
}: PostMetaInfoProps) {
  const { formatDate } = useFormattedDate();
  return (
    <div className={cn("flex gap-1 items-center justify-start flex-wrap", className)}>
      {/* Publish Date */}
      <div className="flex gap-1 items-center text-xs">
        <span className="text-muted-foreground text-start whitespace-nowrap">
          {publishDateLabel} :
        </span>
        <span className="font-semibold text-foreground text-start">
          {formatDate(publishDate)}
        </span>
      </div>

      {/* Separator */}
      <div className="flex items-center">
        <ArrowLeft className="w-3.5 h-3.5 rotate-90 text-muted-foreground" />
      </div>

      {/* Platform */}
      <div className="flex gap-1 items-center">
        <span className="text-xs text-muted-foreground text-start whitespace-nowrap">
          {platformLabel} :
        </span>
        <div className="flex gap-1 items-center">
          {platformIcon}
          <span className="text-xs text-muted-foreground text-start">
            {platformName}
          </span>
        </div>
      </div>
    </div>
  );
}