Record tab

import React from "react"
import {Extensions} from "attio/client"

import {EnrichmentTab} from "./enrichment-tab"

export default Extensions.defineExtension({
  type: "record-tab",
  id: "enrichment",
  label: "Enrichment",
  objects: "companies", // only show on company records
  Tab: ({recordId}) => <EnrichmentTab recordId={recordId} />,
})

import React from "react"
import {Grid, Card, DescriptionList, EmptyState, Button} from "attio/client"

import {useEnrichmentQuery} from "./use-enrichment-query"
import {runEnrichment} from "./run-enrichment.server"

export const EnrichmentTab = ({recordId}: {recordId: string}) => {
  const enrichment = useEnrichmentQuery(recordId) // may suspend!

  if (enrichment === null) {
    return (
      <EmptyState
        title="Not enriched yet"
        description="Pull firmographic data for this company from your enrichment provider."
      >
        <Button label="Enrich now" variant="primary" onClick={() => runEnrichment(recordId)} />
      </EmptyState>
    )
  }

  return (
    <Grid maxColumns={2}>
      <Card title="Firmographics">
        <DescriptionList>
          <DescriptionList.Item label="Industry">{enrichment.industry}</DescriptionList.Item>
          <DescriptionList.Item label="Headcount">{enrichment.headcount}</DescriptionList.Item>
        </DescriptionList>
      </Card>
      <Card title="Funding">
        <DescriptionList>
          <DescriptionList.Item label="Last round">{enrichment.lastRound}</DescriptionList.Item>
          <DescriptionList.Item label="Total raised">{enrichment.totalRaised}</DescriptionList.Item>
        </DescriptionList>
      </Card>
    </Grid>
  )
}