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

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

export const Transaction = ({ hash, txUrl }: Props) => (
  <div
    key={hash}
    className={cn(
      'transaction',
      'flex flex-col items-start gap-2 rounded-md border border-solid border-border bg-background p-4',
    )}
  >
    <Typography variant="body-semi-xs" color="foreground">
      Transaction hash
    </Typography>
    <HexAddress href={txUrl}>{hash}</HexAddress>
  </div>
)