'use client'
// src/components/ui/Panel.tsx
// Input: title, onClose?, children
// Output: elevated panel with header and scrollable body, slide-in animation
// Rationale: reusable for sensor detail (screen 3) and event list (screen 1)

import { motion } from 'framer-motion'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface PanelProps {
  title: string
  onClose?: () => void
  children: React.ReactNode
  className?: string
  width?: string
  animate?: boolean
}

export function Panel({ title, onClose, children, className, width = '320px', animate = true }: PanelProps) {
  const inner = (
    <div
      className={cn(
        'flex flex-col bg-bg-elevated border border-bg-border rounded-lg shadow-md h-full',
        className
      )}
      style={{ width }}
    >
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3 border-b border-bg-border flex-shrink-0">
        <h3 className="text-h3 text-text-primary">{title}</h3>
        {onClose && (
          <button
            onClick={onClose}
            className="p-1 rounded text-text-muted hover:text-text-primary hover:bg-bg-subtle transition-colors duration-fast"
          >
            <X size={14} strokeWidth={1.5} />
          </button>
        )}
      </div>
      {/* Body */}
      <div className="flex-1 overflow-y-auto p-4">
        {children}
      </div>
    </div>
  )

  if (!animate) return inner

  return (
    <motion.div
      initial={{ opacity: 0, x: 16 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: 16 }}
      transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
      style={{ width }}
      className="h-full"
    >
      {inner}
    </motion.div>
  )
}