import { cn } from '../../utils'
import { Typography } from '../Typography'
import { HexAddress } from './HexAddress'

type Props = {
  hash: string
  type?: string
  txUrl?: string
}

export const TransactionWithType = ({ hash, type, txUrl }: Props) => (
  <div
    className={cn(
      'transaction',
      'grid gap-4 rounded-md border border-solid border-border bg-background p-4 md:grid-cols-[140px_minmax(0,1fr)]',
    )}
  >
    <div className="flex min-w-0 flex-col gap-4">
      <Typography variant="body-semi-xs" color="foreground">
        Request label
      </Typography>
      <Typography variant="body-s" color="muted">
        {type || 'Request'}
      </Typography>
    </div>
    <div className="flex min-w-0 flex-col gap-4">
      <Typography variant="body-semi-xs" color="foreground">
        Transaction hash
      </Typography>
      <HexAddress href={txUrl}>{hash}</HexAddress>
    </div>
  </div>
)