'use client';

/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { useRouter } from 'next/navigation';
import React from 'react';

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

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

type GenreCardProps = {
  id: string;
  name: string;
  image_url: string;
};

export default function GenreCard({ name, image_url }: GenreCardProps) {
  const router = useRouter();

  const handleGenreClick = () => {
    const encodedGenreName = encodeURIComponent(name.toLowerCase());
    router.push(`/style/${encodedGenreName}`);
  };

  return (
    <div
      onClick={handleGenreClick}
      className='group relative flex h-full w-60 cursor-pointer flex-col gap-4 rounded-lg p-2 transition ease-in-out'
    >
      <div className='relative aspect-square h-auto w-full transition duration-300 ease-in-out group-hover:-translate-y-2'>
        <div className='relative mx-auto w-full overflow-hidden rounded-lg bg-inherit pb-[100%]'>
          <div className='absolute top-0 left-0 h-full w-full'>
            <ImageWithFallback
              imageSize={LARGE_IMAGE}
              className='h-full w-full rounded-lg object-cover'
              src={image_url || FALLBACK_IMAGE_URL}
              alt={`Genre image for ${name}`}
            />
          </div>
        </div>
      </div>
      <div className='flex h-full w-full flex-col'>
        <h2 className='overflow-hidden pl-4 font-sans text-lg font-semibold text-ellipsis whitespace-nowrap text-foreground-primary'>
          {name}
        </h2>
      </div>
    </div>
  );
}