import type { CSSProperties } from "react";
import EyeIcon from "@/assets/icons/eye.svg?react";
import { formatCompactNumber } from "@/utils/formatNumber";

export type TopVideoCardProps = {
  title: string;
  views: number;
  uploadedAgo: string;
  type: "Short" | "Long";
  duration?: string;
  className?: string;
  style?: CSSProperties;
};

export function TopVideoCard({
  title,
  views,
  uploadedAgo,
  type,
  duration,
  className = "",
  style,
}: TopVideoCardProps) {
  const typeClass =
    type === "Short"
      ? "bg-lavender-100 text-violet-700"
      : "bg-[var(--color-status-info-bg)] text-[var(--color-status-info-text)]";

  return (
    <div
      className={`rounded-xl bg-white border border-neutral-20 shadow-sm p-4 min-w-[250px] shrink-0 animate-fade-in-up ${className}`.trim()}
      style={style}
    >
      <div className="flex items-center gap-2 mb-2 flex-wrap">
        <span className={`label-12 font-medium px-2 py-1 rounded-full break-keep ${typeClass}`}>{type}</span>
        {duration ? <span className="label-12 text-neutral-60 break-keep">{duration}</span> : null}
        <span className="label-12 text-neutral-60 break-keep">{uploadedAgo}</span>
      </div>
      <p className="body-14-medium text-navy-900 line-clamp-2 mb-2 break-keep">{title}</p>
      <div className="flex items-center gap-1 body-14 text-neutral-70 min-w-0">
        <EyeIcon width={14} height={14} className="text-neutral-60 shrink-0" aria-hidden />
        <span className="title-14 break-keep">{formatCompactNumber(views)}</span>
        <span className="text-neutral-60 break-keep">views</span>
      </div>
    </div>
  );
}