'use client';
import { useTalkStore } from '../../_store/useTalkStore';

export const ToggleTalkButton = () => {
  const { isTalking, toggleTalking } = useTalkStore();

  return (
    <button
      onClick={toggleTalking}
      className={`${
        isTalking
          ? 'bg-red-500 hover:bg-red-600'
          : 'bg-transparent hover:bg-neutral-300'
      }`}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className="h-5 w-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z"
        />
      </svg>
    </button>
  );
};