import { Button } from './Button'

export type InboxItemDot = 'red' | 'amber' | 'blue'

export interface InboxItemAction {
  label: string
  primary?: boolean
  onClick?: () => void
}

export interface InboxItemProps {
  dot: InboxItemDot
  title: string
  subtitle: string
  actions: InboxItemAction[]
  /** Renders without the row divider — pass for the last item in a list. */
  isLast?: boolean
}

const DOT_CLASS: Record<InboxItemDot, string> = {
  red: 'bg-danger',
  amber: 'bg-warning',
  blue: 'bg-accent',
}

/** `.item` — one "needs you now" inbox row: severity dot, title/subtitle, action buttons. */
export function InboxItem({ dot, title, subtitle, actions, isLast }: InboxItemProps) {
  return (
    <div className={`flex items-start gap-2.5 py-2.5 ${isLast ? '' : 'border-b border-border'}`}>
      <span className={`mt-[5px] h-2 w-2 flex-shrink-0 rounded-full ${DOT_CLASS[dot]}`} />
      <div>
        <div className="text-[12.5px] font-semibold">{title}</div>
        <div className="mt-px text-[11.5px] text-fg-muted">{subtitle}</div>
      </div>
      <div className="ml-auto flex flex-shrink-0 gap-1.5">
        {actions.map((action) => (
          <Button
            key={action.label}
            variant={action.primary ? 'solid' : 'outline'}
            tone={action.primary ? 'accent' : 'neutral'}
            size="sm"
            onClick={action.onClick}
            className="text-[11.5px]"
          >
            {action.label}
          </Button>
        ))}
      </div>
    </div>
  )
}