hanzo.ai/components/referrals/ReferralHistory.tsx

'use client'

import React from 'react'
import { YStack, Text } from '@hanzo/ui'
import { DataTable, StatusTag } from '@hanzo/ui/product'
import type { ReferralRecord } from '@/components/referrals/types'

interface ReferralHistoryProps {
  referralHistory: ReferralRecord[]
}

// The service names the organization that signed up and nothing about the
// person, so there is no email column to leave empty.
const columns = [
  { key: 'name', header: 'Organization' },
  { key: 'date', header: 'Date' },
  {
    key: 'status',
    header: 'Status',
    render: (r: ReferralRecord) => <StatusTag status={r.status} />,
  },
]

const ReferralHistory = ({ referralHistory }: ReferralHistoryProps) => (
  <YStack
    gap="$4"
    p="$5"
    borderWidth={1}
    borderColor="var(--border)"
    rounded="var(--radius-lg)"
    bg="var(--panel, rgba(255, 255, 255, 0.03))"
  >
    <Text fontSize="$5" fontWeight="600" color="var(--foreground)">
      Referral History
    </Text>
    <DataTable
      columns={columns}
      rows={referralHistory}
      rowKey={(r) => String(r.id)}
      empty="No referrals yet."
    />
  </YStack>
)

export default ReferralHistory