import React from 'react';
import { Icon } from '../shared/Icon';

interface Props {
  id: number;
  num: number | null;
  count: number;
  name: string;
  isSelected: boolean;
  onClick: () => void;
  className?: string;
  color?: string;
}

const RosterCard: React.FC<Props> = ({
  id,
  num,
  count,
  name,
  isSelected,
  onClick,
  className,
  color,
}) => {
  const isTeamCard = className && className.includes('team-card'); // Check if it's a team card

  return (
    <div
      className={`card ${className}`}
      onClick={onClick}
      style={{
        transition: 'transform 3s ease-in-out', // Smooth transition for the left move
        userSelect: 'none',
        position: 'relative', // Make sure pseudo-element positions are relative to the card
      }}
    >
      <div
        className='card-header'
        style={{
          backgroundColor: color,
          color: 'white',
          display: 'flex',
          height: '150px',
          alignItems: 'center',
          justifyContent: 'center',
          position: 'relative', // Position relative for the icon to overlay
          cursor: 'pointer',
        }}
      >
        <Icon
          iconName={
            isTeamCard
              ? isSelected
                ? 'ClipboardFill'
                : 'Clipboard'
              : isSelected
                ? 'CollectionFill'
                : 'Collection'
          } // Use the icon name for the back arrow
          style={{
            fontSize: '40px',
            color: 'white', // White color for the icon
            //marginRight: '5px', // Add some space between the icon and the text
          }}
        />
      </div>

      <div
        className='card-body'
        style={{
          textAlign: 'center', // Ensure the content inside the card body is centered
        }}
      >
        <h5 className='card-title'>
          {isTeamCard ? (name ? name : `Team ${num}`) : `Section ${id}`}
        </h5>
        <p className='card-text' style={{ color: '#808080' }}>
          {isTeamCard
            ? `${count ?? 0} Student${count === 1 ? '' : 's'}`
            : `${count ?? 0} Team${count === 1 ? '' : 's'}`}
        </p>
      </div>
    </div>
  );
};
export default RosterCard;