"use client";
import React from 'react';
import { useRouter } from 'next/navigation';
import { useGetAllHashtagQuery } from '../../store/api/getTrendingHashtag';
import Cookies from 'js-cookie';
import { setHashtagId } from '@/app/store/Slice/hashtagIdSlice';
import { useAppDispatch } from '@/app/hooks/hooks';
import TextTranslate from '@/app/utils/TextTranslate';

function Trends() {
  const token = Cookies.get("Snapta_auth_token");
  const { data: Trends, isLoading } = useGetAllHashtagQuery({ token: token || "" });
  const trends1 = Trends?.tag_users;

  const router = useRouter();
  const dispatch = useAppDispatch();

  
  function handleHashtagRoute(id: string, name: string) {
    dispatch(setHashtagId({ hashtagId: id, hashtagName: name }));
    router.push(`/Hashtag/${name}`);
  }

  return (
    <div
      className="rounded-[10px] px-5 mx-2 sm:mx-0 py-4 bg-[var(--bg-primary)] dark:border  dark:border-[color-mix(in_srgb,var(--border-color),white_07%)] transition-colors duration-200"
      style={{
        boxShadow: "0px 4px 20px 0px rgba(0, 0, 0, 0.08), 0px 0px 10px 0px rgba(255, 255, 255, 0.02)"
      }} >
      <h2 className="font-gilroy_bold text-lg font-bold text-[var(--text-primary)]">
        <TextTranslate text='Trends for you' />
      </h2>
      <div className="pt-0">

        {isLoading ? (
          // 🔄 Shimmer Placeholder updated for theme
          Array.from({ length: 4 }).map((_, idx) => (
            <div key={idx} className="flex gap-3 py-3 animate-pulse">
              <div className="flex flex-col gap-2">
                <div className="w-32 h-3 bg-[var(--border-color)] rounded opacity-20" />
                <div className="w-20 h-2 bg-[var(--border-color)] rounded opacity-10" />
              </div>
            </div>
          ))
        ) : (
          trends1?.slice(0, 4).map((trend) => (
            <div key={trend.id} className="flex flex-col py-2 group">
              <div
                className="cursor-pointer flex flex-col"
                onClick={() => handleHashtagRoute(trend.id, trend.text)}
              >
                <button className="text-[var(--text-primary)] font-medium text-[15px] font-gilroy_semibold text-left group-hover:underline underline-offset-2">
                  #{trend.text}
                </button>

                <p className="text-[var(--text-secondary)] font-gilroy_md text-xs ">
                  {trend.total_hashtag_count} <TextTranslate text="Posts" />
                </p>
              </div>
            </div>
          ))
        )}

      </div>
    </div>
  );
}

export default Trends;