'use client';

/**
 * Emoji reaction picker for messages.
 */

import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { COMMON_EMOJIS } from '../shared';
import { SmilePlus } from 'lucide-react';
import { useState } from 'react';

interface ReactionPickerProps {
  onReact: (emoji: string) => void;
}

export function ReactionPicker({ onReact }: ReactionPickerProps) {
  const [open, setOpen] = useState(false);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger
        render={
          <Button
            variant="ghost"
            size="sm"
            className="size-7 p-0 text-muted-foreground hover:bg-accent hover:text-foreground"
            title="Add reaction"
          >
            <SmilePlus className="size-3.5" />
          </Button>
        }
      />
      <PopoverContent className="w-auto p-2" align="start" sideOffset={4}>
        <p className="mb-2 text-xs font-medium text-muted-foreground">Select emoji</p>
        <div className="grid grid-cols-8 gap-1">
          {COMMON_EMOJIS.map((emoji) => (
            <Button
              key={emoji}
              variant="ghost"
              size="sm"
              onClick={() => { onReact(emoji); setOpen(false); }}
              className="size-7 p-0 text-base hover:bg-accent"
              title={emoji}
            >
              {emoji}
            </Button>
          ))}
        </div>
      </PopoverContent>
    </Popover>
  );
}
