'use client';

import { cn } from '@/utils/cn';

type TyndallEffectProps = {
  className?: string;
};

const rayGroups = [
  {
    className:
      'left-[-32rem] top-[-40rem] lg:left-[-24rem] rotate-[20deg] skew-x-[40deg] skew-y-[48deg]',
    rayClassName: 'h-80 from-static-white to-orange-500',
    offset: 0,
  },
  {
    className:
      'left-[-47rem] top-[-48rem] lg:left-[-40rem] rotate-[20deg] skew-x-[40deg] skew-y-[48deg]',
    rayClassName: 'h-80 from-static-white to-pink-300',
    offset: 3,
  },
  {
    className:
      'left-[-61rem] top-[-56rem] lg:left-[-56rem] rotate-[20deg] skew-x-[40deg] skew-y-[48deg]',
    rayClassName: 'h-80 from-static-white to-purple-500',
    offset: 6,
  },
];

export default function TyndallEffect({ className }: TyndallEffectProps) {
  return (
    <div
      aria-hidden='true'
      className={cn(
        'animate-tyndall-container pointer-events-none absolute inset-x-0 top-0 h-screen overflow-hidden',
        className,
      )}
    >
      {rayGroups.map((group) => (
        <div
          key={group.className}
          className={cn(
            'absolute z-0 flex gap-40 blur-[4rem]',
            group.className,
          )}
        >
          {[0, 1, 2].map((index) => (
            <div
              key={index}
              style={{ animationDelay: `${(group.offset + index) * 0.15}s` }}
              className={cn('w-40 bg-linear-to-b', group.rayClassName)}
            />
          ))}
        </div>
      ))}
    </div>
  );
}