import type { ReactNode } from 'react';
import { cn } from '@/lib/utils';

interface CollapseTransitionProps {
  open: boolean;
  className?: string;
  innerClassName?: string;
  duration?: number;
  children: ReactNode;
}

export function CollapseTransition({
  open,
  className,
  innerClassName,
  duration = 200,
  children,
}: CollapseTransitionProps) {
  return (
    <div
      aria-hidden={!open}
      style={{ transitionDuration: `${duration}ms` }}
      className={cn(
        'grid overflow-hidden transition-[grid-template-rows,opacity] ease-out',
        open ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0 pointer-events-none',
        className,
      )}
    >
      <div className={cn('min-h-0 overflow-hidden', innerClassName)}>
        {children}
      </div>
    </div>
  );
}