import { Image } from '@/components/ui/primitives/Image';
import { Row } from '@/components/ui/layout/Row';
import { Stack } from '@/components/ui/layout/Stack';
import { AccountStateBadge, TierBadge } from './VendorDetail.shared';
import type { VendorDetailData } from './VendorDetail.types';

interface VendorDetailHeaderProps {
  vendor: VendorDetailData;
  logoAlt: string;
}

export function VendorDetailHeader({ vendor, logoAlt }: VendorDetailHeaderProps) {
  return (
    <div className="flex items-start gap-4">
      {vendor.logoUrl && (
        <Image
          src={vendor.logoUrl}
          alt={logoAlt}
          width={64}
          height={64}
          className="rounded-lg object-cover"
          loading="lazy"
        />
      )}
      <Stack gap="2" className="min-w-0 flex-1">
        <p className="text-text-secondary text-sm" data-user-displayname>
          {vendor.businessName}
        </p>
        <Row gap="2">
          <TierBadge tier={vendor.tier} />
          <AccountStateBadge state={vendor.accountState} />
        </Row>
      </Stack>
    </div>
  );
}