import { Link } from 'react-router-dom'
import { StatusBadge } from '../components/StatusBadge.jsx'
import { PriorityBadge } from '../components/PriorityBadge.jsx'

export function ActionListItem({ action, showInitiative = false, manageLink }) {
  return (
    <li className="list-item action-item card-list-item">
      <div className="list-item-main">
        <strong>{action.title}</strong>
        {showInitiative && action.initiative_title && (
          <span className="muted list-item-sub">{action.initiative_title}</span>
        )}
        {action.description && <p className="list-item-desc">{action.description}</p>}
      </div>
      <div className="list-item-meta">
        <StatusBadge status={action.status} />
        <PriorityBadge priority={action.priority} />
        {manageLink && (
          <Link to={manageLink} className="link-inline">
            Öffnen
          </Link>
        )}
      </div>
    </li>
  )
}

export function ActionList({ actions, empty, showInitiative, getManageLink }) {
  if (!actions.length) return empty
  return (
    <ul className="item-list">
      {actions.map((action) => (
        <ActionListItem
          key={action.id}
          action={action}
          showInitiative={showInitiative}
          manageLink={getManageLink?.(action)}
        />
      ))}
    </ul>
  )
}