import type { LucideIcon } from 'lucide-react'

import { Badge } from '@renderer/components/ui/badge'

type TaskRowProps = {
  icon: LucideIcon
  title: string
  value: string
}

export function TaskRow({ icon: Icon, title, value }: TaskRowProps): React.JSX.Element {
  return (
    <div className="flex items-center justify-between rounded-md border bg-muted/30 px-3 py-2">
      <div className="flex items-center gap-2">
        <Icon className="size-4 text-muted-foreground" />
        <span className="text-sm font-medium">{title}</span>
      </div>
      <Badge variant="outline">{value}</Badge>
    </div>
  )
}
