"use client";

import { Badge } from "@/components/ui/badge";
import { CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export function ConverterCardHeader({
  fiatSource,
  cryptoSource,
}: {
  fiatSource: string;
  cryptoSource: string;
}) {
  return (
    <CardHeader className="relative isolate z-10 overflow-hidden rounded-t-2xl border-b border-white/5 bg-[linear-gradient(115deg,rgba(16,39,62,0.9)_0%,rgba(14,32,50,0.95)_46%,rgba(14,50,54,0.88)_100%)] pb-4 sm:pb-5 before:pointer-events-none before:absolute before:inset-0 before:bg-[radial-gradient(140%_120%_at_0%_0%,rgba(56,189,248,0.12)_0%,rgba(56,189,248,0)_45%),radial-gradient(120%_100%_at_100%_0%,rgba(16,185,129,0.1)_0%,rgba(16,185,129,0)_45%)] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <CardTitle className="text-2xl font-semibold tracking-tight">
          Currency Converter
        </CardTitle>
        <Badge
          variant="outline"
          className="max-w-full border-border/70 bg-background/50 text-[11px] sm:text-xs"
        >
          <span className="inline-flex items-center gap-1 whitespace-nowrap sm:hidden">
            <span className="text-muted-foreground">Data sources:</span>
            <a
              href="https://frankfurter.dev/"
              target="_blank"
              rel="noreferrer"
              className="text-foreground transition-colors hover:text-cyan-100"
            >
              {fiatSource}
            </a>
            <span className="text-muted-foreground">•</span>
            <a
              href="https://www.coingecko.com/"
              target="_blank"
              rel="noreferrer"
              className="text-foreground transition-colors hover:text-cyan-100"
            >
              {cryptoSource}
            </a>
          </span>

          <span className="hidden items-center gap-1 whitespace-nowrap sm:inline-flex">
            <span className="text-muted-foreground">Data sources:</span>
            <a
              href="https://frankfurter.dev/"
              target="_blank"
              rel="noreferrer"
              className="text-foreground transition-colors hover:text-cyan-100"
            >
              {fiatSource}
            </a>
            <span className="text-muted-foreground">•</span>
            <a
              href="https://www.coingecko.com/"
              target="_blank"
              rel="noreferrer"
              className="text-foreground transition-colors hover:text-cyan-100"
            >
              {cryptoSource}
            </a>
          </span>
        </Badge>
      </div>
      <CardDescription className="pr-1 text-base/7 sm:text-sm">
        Convert fiat currencies and cryptocurrencies using live exchange rates.
      </CardDescription>
    </CardHeader>
  );
}