"use client";

import { useState } from "react";
import { useTranslation } from "@/hooks/useTranslation";

export function ChannelActions() {
  const { t } = useTranslation("channel");
  const [following, setFollowing] = useState(false);

  return (
    <div className="ch-actions">
      <button
        type="button"
        className={`btn primary${following ? " on" : ""}`}
        onClick={() => setFollowing((f) => !f)}
      >
        {following ? (
          <>
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2.2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M5 12l5 5L20 7" />
            </svg>
            {t("btn_following")}
          </>
        ) : (
          <>
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2.2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M12 5v14M5 12h14" />
            </svg>
            {t("btn_follow")}
          </>
        )}
      </button>
      <button type="button" className="btn secondary">
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <circle cx="18" cy="5" r="3" />
          <circle cx="6" cy="12" r="3" />
          <circle cx="18" cy="19" r="3" />
          <path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4" />
        </svg>
        {t("btn_share")}
      </button>
      <button type="button" className="btn secondary">
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <circle cx="12" cy="12" r="3" />
          <path d="M12 3v3M12 18v3M3 12h3M18 12h3" />
        </svg>
        {t("btn_notify")}
      </button>
    </div>
  );
}