import { UserAvatar } from './user-avatar';
import type * as GQL from '@repo/graphql/types';
import { Badge } from '@repo/ui/components/ui/badge';
import { cn } from '@repo/ui/lib/utils';
import { getCustomerFullName } from '@repo/utils/customer';
import Link from 'next/link';
import { memo } from 'react';

type ContactRowProps = GQL.CustomerFieldsFragment & {
  readonly className?: string;
  readonly description?: string;
  readonly showServices?: boolean;
};

export const ContactRow = memo(function ({ className, description, ...contact }: ContactRowProps) {
  return (
    <Link
      className="block"
      href={contact.active ? `/profile/${contact.telegramId}` : ''}
      key={contact.telegramId}
    >
      <div
        className={cn(
          'flex items-center justify-between',
          contact.active ? 'hover:bg-accent' : 'opacity-50',
          className,
        )}
      >
        <div className={cn('flex items-center space-x-4 rounded-lg transition-colors')}>
          <UserAvatar {...contact} size="sm" />
          <div>
            <p className="font-medium">{getCustomerFullName(contact)}</p>
            {description && (
              <p className="max-w-52 truncate text-xs text-muted-foreground">{description}</p>
            )}
          </div>
        </div>
        {contact.active ? <div /> : <Badge variant="destructive">Неактивен</Badge>}
      </div>
    </Link>
  );
});