'use client';

import type { PointerEvent } from 'react';

type MarsPlanetProps = {
  className?: string;
};

export default function MarsPlanet({ className = '' }: MarsPlanetProps) {
  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
    const bounds = event.currentTarget.getBoundingClientRect();
    const x = ((event.clientX - bounds.left) / bounds.width - 0.5) * 2;
    const y = ((event.clientY - bounds.top) / bounds.height - 0.5) * 2;

    event.currentTarget.style.setProperty('--mars-x', x.toFixed(3));
    event.currentTarget.style.setProperty('--mars-y', y.toFixed(3));
  };

  const resetTilt = (event: PointerEvent<HTMLDivElement>) => {
    event.currentTarget.style.setProperty('--mars-x', '0');
    event.currentTarget.style.setProperty('--mars-y', '0');
  };

  return (
    <div
      aria-hidden="true"
      className={`mars-planet ${className}`}
      onPointerMove={handlePointerMove}
      onPointerLeave={resetTilt}
    >
      <span className="mars-planet__orbit" />
      <span className="mars-planet__body">
        <span className="mars-planet__band mars-planet__band--one" />
        <span className="mars-planet__band mars-planet__band--two" />
        <span className="mars-planet__crater mars-planet__crater--one" />
        <span className="mars-planet__crater mars-planet__crater--two" />
        <span className="mars-planet__crater mars-planet__crater--three" />
      </span>
      <span className="mars-planet__spark mars-planet__spark--one" />
      <span className="mars-planet__spark mars-planet__spark--two" />
    </div>
  );
}