import React from 'react';

import Image from 'next/image';

import { cn } from '@/lib/utils';
import { getFullSizeImageByKey } from '@/utils/images';

import { Link } from '@/i18n/navigation';

interface CreatorAvatarProps {
  imageKey: string | null | undefined;
  name: string | null | undefined;
  onClick?: () => void;
  href?: { pathname: '/alkoto/[id]'; params: { id: string } };
  wrapperClassName?: string;
  imageClassName?: string;
  width?: number;
  height?: number;
}

const CreatorAvatar: React.FC<CreatorAvatarProps> = ({
  imageKey,
  name,
  onClick,
  href,
  wrapperClassName,
  imageClassName,
  width = 400,
  height = 400,
}) => {
  const avatar = (
    <div
      className={cn(
        'relative w-full aspect-square rounded-full bg-mma-cyan overflow-hidden group',
        wrapperClassName
      )}
    >
      <Image
        src={
          imageKey
            ? getFullSizeImageByKey(imageKey)
            : '/assets/images/user_avatar_placeholder_square.png'
        }
        alt={name || 'Alkotó'}
        width={width}
        height={height}
        className={cn(
          'object-cover w-full h-full grayscale transition duration-1000 rounded-full',
          imageClassName
        )}
      />
      {/* bg-cyan hover in lists */}
      {!href && !onClick && (
        <div className="absolute top-0 w-full h-full rounded-full bg-mma-cyan/85 group-hover:opacity-100 opacity-0 mix-blend-multiply transition" />
      )}
    </div>
  );

  if (href) {
    return (
      <Link href={href} className="block">
        {avatar}
      </Link>
    );
  }

  if (onClick) {
    return (
      <button
        type="button"
        onClick={onClick}
        className="inline-block w-fit cursor-pointer"
        aria-label="Kép megnyitása"
      >
        {avatar}
      </button>
    );
  }

  return avatar;
};

export default CreatorAvatar;