import { useNavigate } from 'react-router-dom';

export function HomeSidebar({ items, activeItem, isMobile = false }) {
  const navigate = useNavigate();

  return (
    <aside
      style={{
        background: 'linear-gradient(180deg, rgba(0, 49, 80, 0.98), rgba(7, 64, 98, 0.96))',
        color: '#fff',
        borderRadius: '28px',
        padding: '1.5rem',
        display: 'grid',
        gap: '1.25rem',
        alignContent: 'start',
      }}
    >
      <button
        type="button"
        onClick={() => navigate('/new-attendance')}
        style={{
          border: 'none',
          borderRadius: '20px',
          padding: '1rem 1.15rem',
          background: 'linear-gradient(135deg, var(--color-highlight), #f3b94d)',
          color: '#132534',
          fontWeight: 800,
          textAlign: 'left',
        }}
      >
        + Novo Atendimento
      </button>

      <nav
        style={{
          display: 'grid',
          gap: '0.5rem',
          gridTemplateColumns: isMobile ? 'repeat(auto-fit, minmax(180px, 1fr))' : '1fr',
        }}
      >
        {items.map((item) => {
          const isActive = item.id === activeItem;

          return (
            <button
              key={item.id}
              type="button"
              onClick={() => item.route && navigate(item.route)}
              style={{
                border: 'none',
                borderRadius: '18px',
                padding: '0.9rem 1rem',
                background: isActive ? 'rgba(255, 255, 255, 0.14)' : 'transparent',
                color: '#fff',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                fontWeight: isActive ? 700 : 500,
                width: '100%',
              }}
            >
              <span>{item.label}</span>
              {item.count ? (
                <span
                  style={{
                    minWidth: 30,
                    borderRadius: 999,
                    padding: '0.2rem 0.5rem',
                    background: 'rgba(255, 255, 255, 0.12)',
                    fontSize: '0.82rem',
                  }}
                >
                  {item.count}
                </span>
              ) : null}
            </button>
          );
        })}
      </nav>
    </aside>
  );
}