'use client';

import { cn } from '@/lib/utils';

export const EMOJI_SPRITE_PATH = '/emojis/lendry-emojis.svg';

interface EmojiSpriteProps {
  id: string;
  size?: number;
  className?: string;
  title?: string;
}

export function EmojiSprite({ id, size = 24, className, title }: EmojiSpriteProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 36 36"
      className={cn('inline-block shrink-0 align-middle', className)}
      role="img"
      aria-label={title}
    >
      <use href={`${EMOJI_SPRITE_PATH}#${id}`} xlinkHref={`${EMOJI_SPRITE_PATH}#${id}`} />
    </svg>
  );
}