import React from 'react';
import { Character } from '../types/Character';
import { Icon } from '@iconify/react';

interface CharacterCardProps {
  character: Character;
  onSelect: (id: string) => void;
  onInfoClick: (id: string) => void;
  showInfo: boolean;
  PlayCharacter: () => void;
}

const CharacterCard: React.FC<CharacterCardProps> = ({ 
  character, 
  onSelect, 
  onInfoClick,
  showInfo,
  PlayCharacter
}) => {
  return (
    <>
      <div className='flex justify-center items-center mb-4'>
        <div
          className={`
            h-[65px] w-full cursor-pointer rounded-lg overflow-hidden group relative transition-all duration-300
            ${character.isActive
              ? 'bg-gradient-to-r from-red-600/20 to-transparent border-l-4 border-red-600'
              : 'bg-neutral-900/40 border border-white/5 hover:border-red-600/50 hover:bg-neutral-800/60'}
          `}
          onClick={() => onSelect(character.id)}
        >
          <div 
            className={`
              flex items-center gap-3 transition-all duration-300 h-full
              ${character.isActive ? 'text-red-500' : 'text-neutral-500 group-hover:text-white'}
            `}
          >
            <div 
              className={`
                flex items-center p-4 overflow-hidden h-full
                ${character.isActive 
                  ? 'bg-red-600/10' 
                  : ''}
                ${character.isActive && showInfo ? 'w-full' : character.isActive ? 'w-[70%]' : 'w-full'}
              `}
            >
              <Icon
                icon="material-symbols:person-rounded"
                width="30"
                height="30"
                className={`mr-3 flex-shrink-0`}
              />
              <div className="flex justify-center items-center w-full h-full overflow-hidden">
                <span className={`font-black text-[20px] tracking-tight uppercase italic ${character.isActive ? 'truncate' : 'ml-2'}`}>
                  {character.name}
                </span>
              </div>
            </div>
            {character.isActive && (
              <div className="flex gap-2 flex-shrink-0">
                <button 
                  className={`
                    h-full rounded-none ${character.disabled ? 'bg-neutral-700' : 'bg-red-600 hover:bg-red-500 shadow-[0_0_15px_rgba(220,38,38,0.4)]'} flex text-white items-center justify-center transition-all duration-300
                    ${showInfo ? 'w-0 scale-0 opacity-0 overflow-hidden' : 'w-[65px] scale-100 opacity-100'}
                  `}
                  onClick={(e) => {
                    e.stopPropagation();
                    PlayCharacter();
                  }}
                  disabled={character.disabled}
                >
                  <Icon
                    icon="si:play-fill"
                    width="30"
                    height="30"
                    color="#383838"
                  /> 
                </button>
                <button 
                  className="w-[65px] h-full bg-neutral-800 text-white flex items-center justify-center transition-all hover:bg-neutral-700 flex-shrink-0 border-l border-white/5"
                  onClick={(e) => {
                    e.stopPropagation();
                    onInfoClick(character.id);
                  }}
                >
                  <Icon
                    icon="bi:info"
                    width="30"
                    height="30"
                    color="currentColor"
                  />
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  )
};

export default CharacterCard;
