"use client";

// toolandtea wrapper. Powered by Paper Shaders (Apache-2.0).
// https://github.com/paper-design/shaders
// Install: npm install @paper-design/shaders-react@0.0.81
import { useEffect, useState, type ComponentProps } from 'react';
import { LiquidMetal } from '@paper-design/shaders-react';

type Props = Omit<ComponentProps<typeof LiquidMetal>, 'image' | 'width' | 'height'> & {
  image: string;
  alt: string;
};

export default function LiquidLogo({ image, alt, speed = 1, ...settings }: Props) {
  const [supported, setSupported] = useState(false);
  const [reduced, setReduced] = useState(true);
  useEffect(() => {
    const preference = window.matchMedia('(prefers-reduced-motion: reduce)');
    const update = () => setReduced(preference.matches);
    update();
    preference.addEventListener('change', update);
    const probe = document.createElement('canvas');
    const gl = probe.getContext('webgl2');
    setSupported(Boolean(gl));
    gl?.getExtension('WEBGL_lose_context')?.loseContext();
    return () => preference.removeEventListener('change', update);
  }, []);

  return (
    <div role="img" aria-label={alt} style={{ position: 'relative', width: '100%', height: 520, overflow: 'hidden', background: settings.colorBack ?? '#161719' }}>
      {supported ? (
        <LiquidMetal
          {...settings}
          image={image}
          shape="none"
          fit="contain"
          speed={reduced ? 0 : speed}
          frame={1200}
          width="100%"
          height="100%"
          minPixelRatio={1}
          maxPixelCount={2000000}
        />
      ) : (
        <img src={image} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain', background: '#f2f2f2' }} />
      )}
    </div>
  );
}