import { clsx } from 'clsx'

export function Gradient({
  className,
  ...props
}: React.ComponentPropsWithoutRef<'div'>) {
  return (
    <div
      {...props}
      className={clsx(
        className,
        'bg-linear-145 from-[#0f112b] from-10% via-[#2a1e5a] via-50% to-[#392468] to-90%',
      )}
    />
  )
}

export function GradientBackground() {
  return (
    <div className="relative mx-auto max-w-7xl">
      <div
        className={clsx(
          'absolute -top-44 -right-60 h-60 w-xl transform-gpu md:right-0',
          'bg-linear-145 from-[#0f112b] from-10% via-[#2a1e5a] via-50% to-[#392468] to-90%',
          'rotate-[-10deg] rounded-full blur-3xl',
        )}
      />
    </div>
  )
}

export function GradientLight() {
  return (
    <div className="relative mx-auto max-w-7xl">
      <div
        className={clsx(
          'absolute -top-44 -right-60 h-60 w-xl transform-gpu md:right-0',
          'bg-linear-145 from-[#b79fff] from-10% via-[#a28aff] via-50% to-[#a983fb] to-90%',
          'rotate-[-10deg] rounded-full blur-3xl',
        )}
      />
    </div>
  )
}