'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 { useEffect, useState } from 'react';

import ImageWithFallback from '@/components/image/ImageWithFallback';
import { LARGE_IMAGE } from '@/utils/constants';
import { getCountString, isSecretStatsProfile } from '@/utils/utils';

interface UserCardProps {
  display_name: string;
  avatar_image_url: string;
  handle: string;
  followers_count: number;
}

export default function UserCard({
  display_name,
  avatar_image_url,
  handle,
  followers_count,
}: UserCardProps) {
  const router = useRouter();
  const [followersCount, setFollowersCount] = useState(followers_count);

  // Update follower count when props change
  useEffect(() => {
    setFollowersCount(followers_count);
  }, [followers_count]);

  const handleUserClick = async () => {
    // Add event tracking later
    router.push(`/@${handle}`);
  };

  return (
    <div
      onClick={handleUserClick}
      title={display_name || `@${handle}`}
      className='relative flex h-fit w-48 cursor-pointer flex-col gap-4 rounded-lg p-4 transition ease-in-out hover:bg-background-tertiary'
    >
      <ImageWithFallback
        className='aspect-square h-auto w-full rounded-full object-cover'
        imageSize={LARGE_IMAGE}
        width={224}
        height={224}
        alt={display_name || `@${handle}`}
        src={avatar_image_url}
        style={{ position: 'relative' }}
      />
      <div className='flex h-fit w-full flex-col'>
        <h2 className='overflow-hidden font-sans text-lg font-semibold text-ellipsis whitespace-nowrap text-foreground-primary'>
          {display_name || `@${handle}`}
        </h2>
        <span className='line-clamp-1 font-sans text-sm font-normal text-foreground-secondary'>{`@${handle}`}</span>
        {isSecretStatsProfile({ handle }) ? null : (
          <span
            title={`${followersCount} ${followersCount === 1 ? 'follower' : 'followers'}`}
            className='font-mono text-sm text-foreground-secondary'
          >
            {getCountString(followersCount)}{' '}
            {followersCount === 1 ? 'follower' : 'followers'}
          </span>
        )}
      </div>
    </div>
  );
}