import React from 'react';
import { mdiPound, mdiAccountPlusOutline } from '@mdi/js';
import BaseIcon from '../BaseIcon';

const TrendingBar = () => {
  const trending = [
    { tag: 'reactjs', count: '12.4k' },
    { tag: 'tailwindcss', count: '8.2k' },
    { tag: 'socialmedia', count: '5.6k' },
    { tag: 'nextjs', count: '4.1k' },
    { tag: 'webdev', count: '3.9k' },
  ];

  const suggestions = [
    { name: 'John Doe', handle: '@johndoe', avatar: 'JD' },
    { name: 'Jane Smith', handle: '@janesmith', avatar: 'JS' },
    { name: 'Alex Rivera', handle: '@arivera', avatar: 'AR' },
  ];

  return (
    <div className="hidden lg:block w-80 space-y-6 shrink-0 h-screen sticky top-16 overflow-y-auto aside-scrollbars-[slate] dark:aside-scrollbars-dark">
      {/* Trending Section */}
      <div className="bg-white dark:bg-dark-800 rounded-xl shadow-sm border border-gray-100 dark:border-dark-700 p-5">
        <h3 className="font-bold text-lg mb-4 dark:text-white">Trending for you</h3>
        <div className="space-y-4">
          {trending.map((item) => (
            <div key={item.tag} className="flex items-center justify-between group cursor-pointer">
              <div className="flex items-center space-x-3">
                <div className="bg-gray-100 dark:bg-dark-900 p-2 rounded-lg text-gray-500 group-hover:bg-indigo-50 group-hover:text-indigo-600 transition-colors">
                  <BaseIcon path={mdiPound} size="18" />
                </div>
                <div>
                  <h4 className="text-sm font-semibold dark:text-gray-200 group-hover:text-indigo-600 transition-colors">
                    #{item.tag}
                  </h4>
                  <p className="text-xs text-gray-500 dark:text-dark-600">
                    {item.count} posts
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
        <button className="w-full mt-6 py-2 text-sm font-semibold text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 rounded-lg transition-colors">
          Show more
        </button>
      </div>

      {/* Suggested Users */}
      <div className="bg-white dark:bg-dark-800 rounded-xl shadow-sm border border-gray-100 dark:border-dark-700 p-5">
        <h3 className="font-bold text-lg mb-4 dark:text-white">Who to follow</h3>
        <div className="space-y-4">
          {suggestions.map((user) => (
            <div key={user.handle} className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center text-indigo-600 font-bold text-sm">
                  {user.avatar}
                </div>
                <div>
                  <h4 className="text-sm font-semibold dark:text-gray-200 leading-tight">
                    {user.name}
                  </h4>
                  <p className="text-xs text-gray-500 dark:text-dark-600 leading-tight">
                    {user.handle}
                  </p>
                </div>
              </div>
              <button className="text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 p-2 rounded-full transition-colors">
                <BaseIcon path={mdiAccountPlusOutline} size="20" />
              </button>
            </div>
          ))}
        </div>
        <button className="w-full mt-6 py-2 text-sm font-semibold text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 rounded-lg transition-colors">
          Show more
        </button>
      </div>

      {/* Footer Links */}
      <div className="px-5 text-xs text-gray-500 dark:text-dark-600 flex flex-wrap gap-x-4 gap-y-2">
          <span>Terms of Service</span>
          <span>Privacy Policy</span>
          <span>Cookie Policy</span>
          <span>Accessibility</span>
          <span>Ads info</span>
          <span>© 2026 Socio</span>
      </div>
    </div>
  );
};

export default TrendingBar;
