import type { OpenRateRank } from "../types";

interface OpenRateTop5Props {
  data: OpenRateRank[];
}

/** 오픈율 Top 5 랭킹 */
export default function OpenRateTop5({ data }: OpenRateTop5Props) {
  return (
    <div className="lg:col-span-1 bg-white rounded-xl shadow-sm border border-gray-200 p-6 flex flex-col">
      <h2 className="text-base font-bold text-[#0f172a] mb-6">오픈율 Top 5</h2>
      <div className="flex-1 flex flex-col justify-between">
        {data.map((item) => {
          const isTop2 = item.rank <= 2;
          return (
            <div key={item.rank} className="flex items-center gap-3">
              <span
                className={`text-xs font-bold size-6 rounded-full flex items-center justify-center flex-shrink-0 ${
                  isTop2
                    ? "text-primary bg-blue-50"
                    : "text-gray-500 bg-gray-100"
                }`}
              >
                {item.rank}
              </span>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-gray-900 truncate">{item.template}</p>
                <div className="mt-1.5 h-2 rounded-full bg-gray-100 overflow-hidden">
                  <div
                    className={`h-full rounded-full ${
                      isTop2 ? "bg-primary" : item.rank === 3 ? "bg-blue-300" : "bg-blue-200"
                    }`}
                    style={{ width: `${item.rate}%` }}
                  />
                </div>
              </div>
              <span className="text-sm font-bold text-gray-900 flex-shrink-0">
                {item.rate}%
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}