"use client";

import { useState } from "react";
import { PublicRateBoard } from "@/components/rate-boards";
import type { PublicRate } from "@/lib/rates";

export function RatesExplorer({
  locale,
  rates,
  labels,
}: {
  locale: string;
  rates: PublicRate[];
  labels: {
    choose: string;
    links: string;
    files: string;
    linkTitle: string;
    fileTitle: string;
    linkHint: string;
    fileHint: string;
    country: string;
    perThousand: string;
  };
}) {
  const [kind, setKind] = useState<"LINK" | "FILE" | null>(null);

  return (
    <div className="space-y-6">
      <div className="grid gap-4 md:grid-cols-2">
        <button
          type="button"
          onClick={() => setKind("LINK")}
          className={`card p-6 text-start transition ${
            kind === "LINK" ? "ring-2 ring-brand" : "hover:border-brand/40"
          }`}
        >
          <p className="text-sm text-gold">{labels.choose}</p>
          <h2 className="mt-2 text-2xl font-bold">{labels.links}</h2>
        </button>
        <button
          type="button"
          onClick={() => setKind("FILE")}
          className={`card p-6 text-start transition ${
            kind === "FILE" ? "ring-2 ring-brand" : "hover:border-brand/40"
          }`}
        >
          <p className="text-sm text-gold">{labels.choose}</p>
          <h2 className="mt-2 text-2xl font-bold">{labels.files}</h2>
        </button>
      </div>
      {kind ? (
        <PublicRateBoard
          title={kind === "LINK" ? labels.linkTitle : labels.fileTitle}
          hint={kind === "LINK" ? labels.linkHint : labels.fileHint}
          countryLabel={labels.country}
          cpmLabel={labels.perThousand}
          locale={locale}
          kind={kind}
          rates={rates}
        />
      ) : (
        <p className="text-center text-muted">{labels.choose}</p>
      )}
    </div>
  );
}