<AttioLink />

import React from "react"
import {Table, AttioLink, Destinations} from "attio/client"

import {useAtRiskDeals} from "./use-at-risk-deals"

export function AtRiskDeals() {
  const deals = useAtRiskDeals()

  return (
    <Table label="At risk">
      <Table.Header>
        <Table.HeaderCell>Deal</Table.HeaderCell>
        <Table.HeaderCell>Owner</Table.HeaderCell>
      </Table.Header>
      <Table.Body>
        {deals.map((deal) => (
          <Table.Row key={deal.recordId}>
            <Table.Cell>
              <AttioLink to={Destinations.record({recordId: deal.recordId, object: "deals"})}>
                {deal.name}
              </AttioLink>
            </Table.Cell>
            <Table.Cell>{deal.owner}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  )
}