/* eslint jsx-a11y/no-static-element-interactions: warn */

/* eslint jsx-a11y/click-events-have-key-events: warn */
import React, { useState } from 'react';

import { LARGE_IMAGE } from '@/utils/constants';

import ImageWithFallback from '../image/ImageWithFallback';

interface CategoryCardProps {
  category: string;
  imageUrl: string;
  onClick: () => void;
}

const CategoryCard: React.FC<CategoryCardProps> = ({
  category,
  imageUrl,
  onClick,
}) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className='relative h-[158px] w-[216px] shrink-0 cursor-pointer overflow-hidden rounded-xl shadow-lg'
      onClick={onClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <ImageWithFallback
        imageSize={LARGE_IMAGE}
        src={imageUrl}
        alt={category}
        className='h-full w-full object-cover'
        style={{
          transform: isHovered ? 'scale(1.1)' : 'scale(1)',
          transition: 'transform 0.3s ease-in-out',
        }}
      />

      <div className='absolute inset-0 bg-linear-to-t from-black via-black to-transparent opacity-30'></div>
      <div className='absolute bottom-0 left-0 p-4'>
        <h2 className='rounded-lg bg-white/5 px-4 py-1 font-sans text-[16px] font-medium text-white backdrop-blur-md'>
          {category}
        </h2>
      </div>
    </div>
  );
};

export default CategoryCard;