'use client';

import { Heading } from '@/components/ui/Typography';
import { ReactNode } from 'react';

interface CollapsibleSectionProps {
  title: string;
  children: ReactNode;
  isOpen?: boolean;
  className?: string;
}

export function CollapsibleSection({ 
  title, 
  children, 
  isOpen = false,
  className = ''
}: CollapsibleSectionProps) {
  return (
    <details className={`group mb-4 ${className}`} open={isOpen}>
      <summary className="flex cursor-pointer items-center justify-between py-2">
        <Heading level={3} className="font-medium">{title}</Heading>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-4 w-4 transition-transform duration-200 group-open:rotate-180"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </summary>
      <div className="pt-2 pb-6">
        {children}
      </div>
    </details>
  );
}