"use client";

import { MessageSquare, Music2 } from "lucide-react";
import { useTranslations } from "next-intl";

import { cn } from "@/lib/utils";

interface TimelineQuickActionsProps {
  onOpenTts?: () => void;
  onOpenAudio?: () => void;
  className?: string;
}

export function TimelineQuickActions({
  onOpenTts,
  onOpenAudio,
  className,
}: TimelineQuickActionsProps) {
  const t = useTranslations("auto.componentsStudioTimelineTimelineQuickActions");
  return (
    <div
      className={cn(
        "shrink-0 border-t border-gray-200 bg-white",
        className
      )}
    >
      <button
        type="button"
        onClick={onOpenTts}
        className="flex h-8 w-full cursor-pointer items-center gap-2 px-3 text-xs text-gray-500 transition-colors hover:bg-gray-50 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500"
      >
        <MessageSquare className="h-3.5 w-3.5 shrink-0 text-gray-400" aria-hidden />
        {t("addTextToSpeech")}
      </button>
      <button
        type="button"
        onClick={onOpenAudio}
        className="flex h-8 w-full cursor-pointer items-center gap-2 border-t border-gray-100 px-3 text-xs text-gray-500 transition-colors hover:bg-gray-50 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500"
      >
        <Music2 className="h-3.5 w-3.5 shrink-0 text-gray-400" aria-hidden />
        {t("addAudio")}
      </button>
    </div>
  );
}
