src/components/base/Select/SelectContent.tsx

'use client';

import { cn } from '@/utils/Helpers';
import * as React from 'react';
import { SelectContext } from './SelectContext';

export default function SelectContent({ children, className }: { children: React.ReactNode; className?: string }) {
  const context = React.useContext(SelectContext);
  if (!context) {
    throw new Error('SelectContent must be used within Select');
  }

  if (!context.open) {
    return null;
  }

  return (
    <div
      className={cn(
        'absolute top-full z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover text-popover-foreground shadow-md',
        className,
      )}
    >
      <div className="p-1">{children}</div>
    </div>
  );
}