import {ExternalLink, Maximize2} from 'lucide-react';

type DemoFrameProps = {
  title: string;
  url: string;
  openLabel: string;
};

export function DemoFrame({title, url, openLabel}: DemoFrameProps) {
  return (
    <div className="demoFrame">
      <div className="demoFrame__bar">
        <span>{title}</span>
        <div className="demoFrame__actions">
          <a href={url} target="_blank" rel="noreferrer" aria-label="Otwórz demo w nowej karcie">
            <ExternalLink size={18} />
          </a>
          <a href={url} target="_blank" rel="noreferrer" aria-label="Pełny ekran">
            <Maximize2 size={18} />
          </a>
        </div>
      </div>
      <div className="demoFrame__viewport">
        <iframe title={title} src={url} loading="lazy" allowFullScreen />
        <a className="demoFrame__fallback" href={url} target="_blank" rel="noreferrer">
          {openLabel}
        </a>
      </div>
    </div>
  );
}
