klz-cables.com/components/ProductTabs.tsx

import React from 'react';

interface ProductTabsProps {
  children: React.ReactNode;
  technicalData?: React.ReactNode;
  sidebar?: React.ReactNode;
}

export default function ProductTabs({ children, technicalData, sidebar }: ProductTabsProps) {
  return (
    <div className="space-y-24">
      <div className="flex flex-col lg:flex-row gap-12 items-start">
        <div className="flex-1 min-w-0">
          {sidebar && (
            <div className="lg:hidden mb-12">
              {sidebar}
            </div>
          )}
          <div className="max-w-none">
            {children}
          </div>
        </div>

        {sidebar && (
          <div className="hidden lg:block sticky top-32 w-[350px] xl:w-[400px] flex-shrink-0">
            {sidebar}
          </div>
        )}
      </div>

      {technicalData && (
        <div className="pt-24 border-t-2 border-neutral-dark/5">
          <div className="mb-16">
            <h2 className="text-3xl md:text-4xl font-black text-primary tracking-tighter uppercase mb-4">Technical Specifications</h2>
            <div className="h-1.5 w-24 bg-accent rounded-full" />
          </div>
          <div className="not-prose">
            {technicalData}
          </div>
        </div>
      )}
    </div>
  );
}