import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { cn } from '@/lib/utils';

/**
 * TabWrapperProps interface extends React.ComponentProps<typeof Tabs> to include all standard Tabs attributes.
 */
interface TabWrapperProps extends React.ComponentProps<typeof Tabs> {
  /**
   * The orientation of the tabs.
   * @default 'horizontal'
   */
  orientation?: 'horizontal' | 'vertical';
}

/**
 * A wrapper component for the Tabs component from `ui/tabs`.
 *
 * @param {TabWrapperProps} props - The props for the component.
 * @returns {React.ReactElement} A Tabs element containing the tabs and content.
 */
export function TabWrapper({
  children,
  className,
  orientation = 'horizontal',
  ...props
}: TabWrapperProps) {
  return (
    <Tabs
      {...props}
      orientation={orientation}
      className={cn(
        'w-full lg:max-w-2xl mx-auto',
        orientation === 'vertical' && 'flex gap-6',
        className,
      )}
    >
      {children}
    </Tabs>
  );
}

// Re-export tab components for convenience
export { TabsContent, TabsList, TabsTrigger };