'use client';
import type { Address, Chain } from 'viem';
import { Address as AddressComponent } from './Address';
import { Avatar } from './Avatar';
import { Badge } from './Badge';
import { Identity } from './Identity';
import { Name } from './Name';
import { Socials } from './Socials';

import { border, cn } from '../../styles/theme';

type IdentityCardProps = {
  address?: Address;
  chain?: Chain;
  className?: string;
  schemaId?: Address | null;
  /** Controls whether the badge shows a tooltip on hover. When true, the tooltip displays the attestation's name. When a string is provided, that text overrides the default display. Defaults to false. */
  badgeTooltip?: boolean | string;
};

export function IdentityCard({
  address,
  chain,
  className = '',
  schemaId,
  badgeTooltip,
}: IdentityCardProps) {
  return (
    <Identity
      address={address}
      chain={chain}
      className={cn(
        'rounded-ock-default',
        border.lineDefault,
        'bg-ock-background',
        'items-left flex min-w-[300px] p-4',
        className,
      )}
      schemaId={schemaId}
    >
      <Avatar />
      <Name>
        <Badge tooltip={badgeTooltip} />
      </Name>
      <AddressComponent />
      <Socials />
    </Identity>
  );
}