"use client";

import { ExternalLink, RotateCcw } from "lucide-react";

interface LegacyAppFrameProps {
  title: string;
  description: string;
  src: string;
}

export default function LegacyAppFrame({ title, description, src }: LegacyAppFrameProps) {
  return (
    <div className="h-[calc(100dvh-7.5rem)] md:h-[calc(100dvh-9rem)] flex flex-col min-h-[620px]">
      <div className="flex items-center justify-between gap-3 mb-3">
        <div className="min-w-0">
          <h1 className="text-xl font-extrabold text-ink">{title}</h1>
          <p className="text-sm text-ink-soft">{description}</p>
        </div>
        <div className="flex gap-2 shrink-0">
          <button
            type="button"
            onClick={() => window.location.reload()}
            className="inline-flex items-center justify-center w-9 h-9 rounded-lg border border-line bg-surface text-faint hover:text-ink"
            title="Recargar"
          >
            <RotateCcw size={16} />
          </button>
          <a
            href={src}
            target="_blank"
            rel="noreferrer"
            className="inline-flex items-center justify-center w-9 h-9 rounded-lg border border-line bg-surface text-faint hover:text-ink"
            title="Abrir en pestaña"
          >
            <ExternalLink size={16} />
          </a>
        </div>
      </div>
      <iframe
        src={src}
        title={title}
        className="w-full flex-1 rounded-xl border border-line bg-black"
      />
    </div>
  );
}