import Avatar from '@/components/image/Avatar';
import Link from '@/components/link/Link';
import { SMALL_IMAGE } from '@/utils/constants';

export interface ProjectTagProps {
  name: string;
  id: string;
  imageUrl?: string;
  showAvatar?: boolean;
  fontSize?: number;
  hidden?: boolean;
}

const ProjectTag: React.FC<ProjectTagProps> = ({
  name,
  id,
  imageUrl,
  showAvatar = true,
  fontSize,
  hidden = false,
}) => {
  return !name || hidden ? null : (
    <div className='w-fit'>
      <div className='flex flex-row items-center font-sans text-sm font-medium text-foreground-primary'>
        <div className='relative mr-2 w-8 shrink-0'>
          <div className='relative w-8'>
            {showAvatar && (
              <Link href={`/create?wid=${id}`} className='relative z-10 block'>
                <div className='relative h-full w-full'>
                  <Avatar
                    className='h-full w-full rounded-lg object-cover'
                    src={imageUrl || null}
                    imageSize={SMALL_IMAGE}
                    alt='Project avatar'
                  />
                </div>
              </Link>
            )}
          </div>
        </div>
        <Link href={`/create?wid=${id}`}>
          <span
            title={name}
            className='line-clamp-1 max-w-full break-all hover:underline'
            style={{ fontSize: fontSize }}
          >
            {name}
          </span>
        </Link>
      </div>
    </div>
  );
};

export default ProjectTag;