'use client';

import Picker from '@emoji-mart/react';
import data from '@emoji-mart/data';

interface EmojiProps {
  emoji: string;
  className?: string;
  size?: number;
}

export function Emoji({ emoji, className = '' }: EmojiProps) {
  // Utiliser les fonts système pour un rendu cohérent et performant
  return (
    <span
      className={`inline-block ${className}`}
      style={{
        fontFamily:
          'Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, sans-serif',
        lineHeight: 1,
        verticalAlign: 'middle',
      }}
      role="img"
      aria-label={emoji}
    >
      {emoji}
    </span>
  );
}

// Composant pour afficher un picker d'emojis
interface EmojiPickerProps {
  onEmojiSelect: (emoji: string) => void;
  className?: string;
}

interface EmojiData {
  native: string;
  [key: string]: unknown;
}

export function EmojiPicker({
  onEmojiSelect,
  className = '',
}: EmojiPickerProps) {
  return (
    <div className={className}>
      <Picker
        data={data}
        onEmojiSelect={(emoji: EmojiData) => onEmojiSelect(emoji.native)}
        theme="light"
        previewPosition="none"
        searchPosition="top"
        navPosition="bottom"
        skinTonePosition="none"
        perLine={8}
        maxFrequentRows={2}
      />
    </div>
  );
}
