'use client';

import { Droplet } from 'lucide-react';
import { ElementBadge } from '@/components/ui/element-badge';
import type { ElementState } from '@/lib/game/types';
import { ELEMENTS } from '@/lib/game/constants';

interface EssenceItemProps {
  elementId: string;
  state: ElementState;
}

export function EssenceItem({ elementId, state }: EssenceItemProps) {
  const elem = ELEMENTS[elementId];
  if (!elem) return null;
  
  return (
    <div
      className="p-2 rounded border bg-[var(--bg-sunken)]"
      style={{
        borderColor: `var(--mana-${elementId})`,
        backgroundColor: `var(--mana-${elementId})20`,
      }}
    >
      <div className="flex items-center gap-1">
        <ElementBadge element={elementId} showIcon={true} size="sm" />
      </div>
      <div className="text-xs text-[var(--text-secondary)] mt-1">
        {state.current} / {state.max}
      </div>
    </div>
  );
}

interface EssenceSectionProps {
  essence: [string, ElementState][];
}

export function EssenceSection({ essence }: EssenceSectionProps) {
  if (essence.length === 0) return null;
  
  return (
    <div>
      <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
        <Droplet className="w-3 h-3" />
        Elemental Essence
      </div>
      <div className="grid grid-cols-2 gap-2">
        {essence.map(([id, state]) => (
          <EssenceItem key={id} elementId={id} state={state} />
        ))}
      </div>
    </div>
  );
}
