"use client";

import type { CSSProperties } from "react";
import { confirmedPlatforms, platforms } from "@/data/platforms";
import { trackPlatformClick } from "@/lib/analytics";
import { cn } from "@/lib/utils";
import type { PlatformId } from "@/types";
import { PlatformIcon } from "@/components/platform-icon";

type StreamingLinksProps = {
  ids?: PlatformId[];
  context: string;
  compact?: boolean;
  className?: string;
};

export function StreamingLinks({
  ids,
  context,
  compact = false,
  className,
}: StreamingLinksProps) {
  const source = ids
    ? platforms.filter(
        (platform) => ids.includes(platform.id) && platform.confirmed,
      )
    : confirmedPlatforms;

  return (
    <div className={cn("streaming-links", compact && "is-compact", className)}>
      {source.map((platform) => (
        <a
          key={platform.id}
          href={platform.url}
          target="_blank"
          rel="noreferrer"
          className="streaming-link"
          aria-label={`Ouvir SelahBeat no ${platform.name}`}
          onClick={() => trackPlatformClick(platform.name, context)}
          style={{ "--platform-color": platform.color } as CSSProperties}
        >
          <PlatformIcon id={platform.id} />
          <span>{compact ? platform.shortName : platform.name}</span>
        </a>
      ))}
    </div>
  );
}