Keep/keep-notes/components/note-actions.tsx

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Archive,
  ArchiveRestore,
  MoreVertical,
  Palette,
  Pin,
  Trash2,
  Users,
  Maximize2,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { NOTE_COLORS } from "@/lib/types"
import { useLanguage } from "@/lib/i18n"

interface NoteActionsProps {
  isPinned: boolean
  isArchived: boolean
  currentColor: string
  currentSize?: 'small' | 'medium' | 'large'
  onTogglePin: () => void
  onToggleArchive: () => void
  onColorChange: (color: string) => void
  onSizeChange?: (size: 'small' | 'medium' | 'large') => void
  onDelete: () => void
  onShareCollaborators?: () => void
  className?: string
}

export function NoteActions({
  isPinned,
  isArchived,
  currentColor,
  currentSize = 'small',
  onTogglePin,
  onToggleArchive,
  onColorChange,
  onSizeChange,
  onDelete,
  onShareCollaborators,
  className
}: NoteActionsProps) {
  const { t } = useLanguage()

  return (
    <div
      className={cn("flex items-center justify-end gap-1", className)}
      onClick={(e) => e.stopPropagation()}
    >
      {/* Color Palette */}
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="sm" className="h-8 w-8 p-0" title={t('notes.changeColor')}>
            <Palette className="h-4 w-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <div className="grid grid-cols-5 gap-2 p-2">
            {Object.entries(NOTE_COLORS).map(([colorName, classes]) => (
              <button
                key={colorName}
                className={cn(
                  'h-8 w-8 rounded-full border-2 transition-transform hover:scale-110',
                  classes.bg,
                  currentColor === colorName ? 'border-gray-900 dark:border-gray-100' : 'border-gray-300 dark:border-gray-700'
                )}
                onClick={() => onColorChange(colorName)}
                title={colorName}
              />
            ))}
          </div>
        </DropdownMenuContent>
      </DropdownMenu>

      {/* More Options */}
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="sm" className="h-8 w-8 p-0" aria-label={t('notes.moreOptions')}>
            <MoreVertical className="h-4 w-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          {/* Pin/Unpin Option */}
          <DropdownMenuItem onClick={onTogglePin}>
            {isPinned ? (
              <>
                <Pin className="h-4 w-4 mr-2" />
                {t('notes.unpin')}
              </>
            ) : (
              <>
                <Pin className="h-4 w-4 mr-2" />
                {t('notes.pin')}
              </>
            )}
          </DropdownMenuItem>

          <DropdownMenuItem onClick={onToggleArchive}>
            {isArchived ? (
              <>
                <ArchiveRestore className="h-4 w-4 mr-2" />
                {t('notes.unarchive')}
              </>
            ) : (
              <>
                <Archive className="h-4 w-4 mr-2" />
                {t('notes.archive')}
              </>
            )}
          </DropdownMenuItem>

          {/* Size Selector */}
          {onSizeChange && (
            <>
              <DropdownMenuSeparator />
              <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
                {t('notes.size')}
              </div>
              {(['small', 'medium', 'large'] as const).map((size) => (
                <DropdownMenuItem
                  key={size}
                  onSelect={(e) => {
                    onSizeChange?.(size);
                  }}
                  className={cn(
                    "capitalize",
                    currentSize === size && "bg-accent"
                  )}
                >
                  <Maximize2 className="h-4 w-4 mr-2" />
                  {t(`notes.${size}` as const)}
                </DropdownMenuItem>
              ))}
            </>
          )}

          {/* Collaborators */}
          {onShareCollaborators && (
            <>
              <DropdownMenuSeparator />
              <DropdownMenuItem
                onClick={(e) => {
                  e.stopPropagation()
                  onShareCollaborators()
                }}
              >
                <Users className="h-4 w-4 mr-2" />
                {t('notes.shareWithCollaborators')}
              </DropdownMenuItem>
            </>
          )}

          <DropdownMenuSeparator />
          <DropdownMenuItem onClick={onDelete} className="text-red-600 dark:text-red-400">
            <Trash2 className="h-4 w-4 mr-2" />
            {t('notes.delete')}
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}