import { Show, type Component } from "solid-js"
import { Icon } from "@opencode-ai/ui/v2/icon"
import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
import { useLanguage } from "@/context/language"
import { useVoiceOptional } from "./voice-context"

export const VoiceButton: Component<{ class?: string }> = (props) => {
  const voice = useVoiceOptional()
  const language = useLanguage()

  return (
    <Show when={voice.available()}>
      <TooltipV2
        value={
          voice.recording()
            ? language.t("voice.tooltip.stop")
            : language.t("voice.tooltip.start", { hotkey: voice.config().hotkey })
        }
        placement="top"
      >
        <IconButtonV2
          class={props.class}
          data-action="prompt-voice"
          type="button"
          variant="ghost-muted"
          size="large"
          aria-label={voice.recording() ? language.t("voice.tooltip.stop") : language.t("voice.action.dictate")}
          aria-pressed={voice.recording()}
          onClick={() => void voice.toggle()}
          style={{
            color: voice.recording() ? "var(--color-danger, #ef4444)" : undefined,
            animation: voice.recording() ? "voice-pulse 1.2s ease-in-out infinite" : undefined,
          }}
          icon={<Icon name={voice.processing() ? "settings-gear" : "microphone"} />}
        />
      </TooltipV2>
    </Show>
  )
}
