import ChannelYoutubeIcon from "@/assets/icons/channel-youtube.svg?react";
import ExternalLinkIcon from "@/assets/icons/external-link.svg?react";
import type { YouTubeAudit } from "@/features/report/types/youtubeAudit";
import { safeUrl } from "@/utils/safeUrl";

export type YouTubeChannelInfoCardProps = {
  data: YouTubeAudit;
};

export function YouTubeChannelInfoCard({ data }: YouTubeChannelInfoCardProps) {
  return (
    <div className="rounded-2xl bg-white border border-neutral-20 shadow-sm p-6 mb-8 animate-fade-in-up animation-delay-100">
      <div className="flex items-center gap-3 mb-4">
        <div className="w-10 h-10 rounded-xl bg-[var(--color-status-critical-bg)] flex items-center justify-center text-[var(--color-status-critical-text)] [&_svg]:block">
          <ChannelYoutubeIcon width={20} height={20} aria-hidden />
        </div>
        <div className="min-w-0">
          <p className="title-18 text-navy-900 break-keep">{data.channelName}</p>
          <p className="body-14 text-neutral-60 break-keep">{data.handle}</p>
        </div>
      </div>
      <p className="body-14 text-neutral-70 mb-4 whitespace-pre-line break-keep">{data.channelDescription}</p>
      <div className="flex flex-wrap gap-3 body-14 text-neutral-60">
        <span className="break-keep">개설일: {data.channelCreatedDate}</span>
        <span className="break-keep">평균 영상 길이: {data.avgVideoLength}</span>
        <span className="break-keep">업로드 빈도: {data.uploadFrequency}</span>
      </div>

      {data.linkedUrls.length > 0 ? (
        <div className="mt-4 flex flex-wrap gap-2">
          {data.linkedUrls.map((link) => (
            <a
              key={link.url}
              href={safeUrl(link.url)}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 label-12 text-violet-700 hover:underline break-keep cursor-pointer"
            >
              <ExternalLinkIcon aria-hidden />
              {link.label}
            </a>
          ))}
        </div>
      ) : null}
    </div>
  );
}