Image Generation

export function ImageGeneration({
  prompt = "a calm mountain lake at dawn",
  resolution = "1024 × 1024",
}: {
  prompt?: string;
  resolution?: string;
}) {
  return (
    <div className="ig-wrap">
      <div className="ig-canvas" role="img" aria-label="Generating image">
        <span className="ig-dots" aria-hidden />
        <span className="ig-glow" aria-hidden />
        <span className="ig-res">{resolution}</span>
      </div>
      <div className="ig-meta">
        <span className="ig-label">Generating image</span>
        <span className="ig-prompt">“{prompt}”</span>
      </div>
    </div>
  );
}

/* ImageGeneration.css — a soft light canvas with a dot grid that lights up
   under a slowly drifting, organic glow (ChatGPT-style image loading). */
.ig-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ig-canvas { position: relative; width: 100%; max-width: 208px; aspect-ratio: 1 / 1; border-radius: 12px; background: #fafafa; overflow: hidden; }
.ig-dots { position: absolute; inset: 2px; background-image: radial-gradient(circle, #a1a1a1 0.7px, transparent 1.3px); background-size: 11px 11px; background-repeat: space; opacity: 0.22; }
.ig-glow { position: absolute; inset: 2px; background-image: radial-gradient(circle, #0b0d12 1.1px, transparent 1.6px); background-size: 11px 11px; background-repeat: space; -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 60%), radial-gradient(ellipse at center, #000 0%, transparent 62%); mask-image: radial-gradient(ellipse at center, #000 0%, transparent 60%), radial-gradient(ellipse at center, #000 0%, transparent 62%); -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; -webkit-mask-size: 52% 46%, 40% 40%; mask-size: 52% 46%, 40% 40%; -webkit-mask-position: 16% 20%, 30% 32%; mask-position: 16% 20%, 30% 32%; animation: ig-morph 4.2s cubic-bezier(0.35, 1.55, 0.65, 1) infinite, ig-breathe 1.9s cubic-bezier(0.66, 0, 0.34, 1) infinite; }
@keyframes ig-morph {
  0% { -webkit-mask-size: 52% 46%, 40% 40%; mask-size: 52% 46%, 40% 40%; -webkit-mask-position: 16% 20%, 30% 32%; mask-position: 16% 20%, 30% 32%; }
  25% { -webkit-mask-size: 46% 58%, 44% 38%; mask-size: 46% 58%, 44% 38%; -webkit-mask-position: 84% 16%, 66% 30%; mask-position: 84% 16%, 66% 30%; }
  50% { -webkit-mask-size: 60% 44%, 38% 46%; mask-size: 60% 44%, 38% 46%; -webkit-mask-position: 82% 84%, 62% 68%; mask-position: 82% 84%, 62% 68%; }
  75% { -webkit-mask-size: 48% 54%, 46% 40%; mask-size: 48% 54%, 46% 40%; -webkit-mask-position: 14% 82%, 34% 66%; mask-position: 14% 82%, 34% 66%; }
  100% { -webkit-mask-size: 52% 46%, 40% 40%; mask-size: 52% 46%, 40% 40%; -webkit-mask-position: 16% 20%, 30% 32%; mask-position: 16% 20%, 30% 32%; }
}
@keyframes ig-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.ig-res { position: absolute; top: 8px; right: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #a1a1a1; background: rgba(255, 255, 255, 0.72); padding: 2px 7px; border-radius: 999px; backdrop-filter: blur(4px); }
.ig-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; width: 100%; max-width: 208px; }
.ig-label { background: linear-gradient(90deg, #1a1a1a 0%, #1a1a1a 30%, rgba(26, 26, 26, 0.45) 45%, rgba(26, 26, 26, 0.45) 55%, #1a1a1a 70%, #1a1a1a 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: ig-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite; font-weight: 550; font-size: 14px; }
@keyframes ig-shine { 0%, 18% { background-position: 100% 0; } 82%, 100% { background-position: 0% 0; } }
.ig-prompt { color: #a1a1a1; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .ig-glow { animation: none; opacity: 0.7; }
  .ig-label { animation: none; -webkit-text-fill-color: #1a1a1a; color: #1a1a1a; }
}
@media (prefers-color-scheme: dark) {
  .ig-canvas { background: #171717; }
  .ig-glow { background-image: radial-gradient(circle, #f5f5f5 1.1px, transparent 1.6px); }
  .ig-res { color: #a3a3a3; background: rgba(0, 0, 0, 0.4); }
  .ig-label { background: linear-gradient(90deg, #f5f5f5 0%, #f5f5f5 30%, rgba(245, 245, 245, 0.45) 45%, rgba(245, 245, 245, 0.45) 55%, #f5f5f5 70%, #f5f5f5 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; }
}