import { useState } from 'react'
import { ChevronDown, ChevronUp } from 'lucide-react'
import { getStatusColor, getStatusBg } from '../../utils/interpret'

export default function PilotRuleCard({ item }) {
  const [open, setOpen] = useState(false)
  const color = getStatusColor(item.status)
  return (
    <div style={{ border: `1px solid ${color}33`, borderRadius: 8, marginBottom: 6, overflow: 'hidden' }}>
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          padding: '8px 12px',
          width: '100%',
          textAlign: 'left',
          background: `${getStatusBg(item.status)}88`,
          border: 'none',
          cursor: 'pointer',
          fontFamily: 'var(--font)',
        }}
      >
        <span style={{ fontSize: 15 }}>{item.icon}</span>
        <div style={{ flex: 1 }}>
          <div
            style={{
              fontSize: 11,
              fontWeight: 600,
              color,
              textTransform: 'uppercase',
              letterSpacing: '0.04em',
            }}
          >
            {item.category}
          </div>
          <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text1)' }}>{item.title}</div>
        </div>
        {item.value && <span style={{ fontSize: 14, fontWeight: 700, color }}>{item.value}</span>}
        {open ? <ChevronUp size={14} color="var(--text3)" /> : <ChevronDown size={14} color="var(--text3)" />}
      </button>
      {open && (
        <div
          style={{
            padding: '8px 12px',
            fontSize: 12,
            color: 'var(--text2)',
            lineHeight: 1.6,
            borderTop: `1px solid ${color}22`,
          }}
        >
          {item.detail}
        </div>
      )}
    </div>
  )
}
