F-r-ldraledigplannerare/frontend/src/components/dashboard/DaysBreakdown.tsx

import { ReactNode } from 'react'

export interface DaysBreakdownProps {
  breakdown: Array<{ type: string; count: number }>
}

export function DaysBreakdown({ breakdown }: DaysBreakdownProps): ReactNode {
  if (!breakdown || breakdown.length === 0) {
    return (
      <div data-testid="days-breakdown" className="days-breakdown">
        <p className="days-breakdown__empty">No days recorded yet</p>
      </div>
    )
  }

  return (
    <div data-testid="days-breakdown" className="days-breakdown">
      <table className="days-breakdown__table">
        <thead>
          <tr>
            <th>Leave Type</th>
            <th>Days</th>
          </tr>
        </thead>
        <tbody>
          {breakdown.map((item, idx) => (
            <tr key={idx} data-testid={`breakdown-row-${item.type}`}>
              <td>{item.type}</td>
              <td>{item.count}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}