interface SubSection {
  id: string;
  label: string;
}

interface AsideSectionProps {
  activeSubSection: string;
  onSubSectionClick: (subSectionId: string) => void;
  subSections: SubSection[];
  mainTabTitle: string;
}

const AsideSection = ({
  activeSubSection,
  onSubSectionClick,
  subSections,
  mainTabTitle
}: AsideSectionProps) => {
  // If no subsections, don't render the aside navigation
  if (subSections.length === 0) {
    return null;
  }

  return (
    <div className="w-[16vw] p-4">
      <div className="mb-4">
        <h3 className="text-lg font-semibold text-gray-800">{mainTabTitle}</h3>
        <p className="text-sm text-gray-500 mt-1">Navigate through sections</p>
      </div>
      
      <nav className="space-y-2 max-h-96 overflow-y-auto">
        {subSections.map((subSection) => (
          <a
            key={subSection.id}
            href={`#${subSection.id}`}
            onClick={(e) => {
              e.preventDefault(); // Prevent default anchor behavior
              onSubSectionClick(subSection.id);
            }}
            className={`block w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 hover:bg-gray-50 cursor-pointer no-underline ${
              activeSubSection === subSection.id
                ? "bg-blue-50 text-blue-600 border-l-4 border-blue-600 shadow-sm"
                : "text-gray-600 hover:text-gray-800 hover:bg-gray-50"
            }`}
          >
            <span className="block">{subSection.label}</span>
          </a>
        ))}
      </nav>
    </div>
  );
};

export default AsideSection;