'use client';

import { useState } from 'react';
import { ChevronDown } from 'lucide-react';

interface TreatmentRailSectionProps {
  title: string;
  subtitle?: string;
  count?: number;
  defaultExpanded?: boolean;
  variant?: 'default' | 'attention';
  children: React.ReactNode;
}

export function TreatmentRailSection({
  title,
  subtitle,
  count,
  defaultExpanded = false,
  variant = 'default',
  children,
}: TreatmentRailSectionProps) {
  const [expanded, setExpanded] = useState(defaultExpanded);

  const shellClass =
    variant === 'attention'
      ? 'surface-card border border-amber-500/35 bg-amber-500/5'
      : 'surface-card';

  return (
    <section className={`${shellClass} overflow-hidden`}>
      <button
        type="button"
        onClick={() => setExpanded((open) => !open)}
        className="flex w-full items-start gap-2 px-3 py-2.5 text-left hover:bg-background-secondary/30 transition-colors"
        aria-expanded={expanded}
      >
        <ChevronDown
          className={`h-4 w-4 shrink-0 mt-0.5 text-text-muted transition-transform ${
            expanded ? 'rotate-0' : '-rotate-90'
          }`}
        />
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-1.5">
            <h3 className="text-sm font-semibold text-text-primary">{title}</h3>
            {count !== undefined && count > 0 ? (
              <span className="rounded-full bg-background-secondary px-1.5 py-0.5 text-[10px] font-medium tabular-nums text-text-muted">
                {count}
              </span>
            ) : null}
          </div>
          {subtitle ? (
            <p className="text-[11px] text-text-muted mt-0.5 line-clamp-2">{subtitle}</p>
          ) : null}
        </div>
      </button>
      {expanded ? <div className="px-3 pb-3 pt-0 border-t border-border/50">{children}</div> : null}
    </section>
  );
}