import * as React from 'react';
import { cn } from '@/lib/utils';

export type PropertyStatus =
  | 'active'
  | 'pending'
  | 'sold'
  | 'rented'
  | 'rejected'
  | 'draft';

const STATUS_CONFIG: Record<
  PropertyStatus,
  { label: string; colorClass: string; dotClass: string }
> = {
  active: {
    label: 'Đang bán',
    colorClass: 'bg-signal-up-bg text-signal-up ring-signal-up/20',
    dotClass: 'bg-signal-up',
  },
  pending: {
    label: 'Chờ duyệt',
    colorClass: 'bg-warning/10 text-warning ring-warning/20',
    dotClass: 'bg-warning',
  },
  sold: {
    label: 'Đã bán',
    colorClass: 'bg-muted text-foreground-muted ring-border',
    dotClass: 'bg-foreground-muted',
  },
  rented: {
    label: 'Đã thuê',
    colorClass: 'bg-accent-blue/10 text-accent-blue ring-accent-blue/20',
    dotClass: 'bg-accent-blue',
  },
  rejected: {
    label: 'Từ chối',
    colorClass: 'bg-destructive/10 text-destructive ring-destructive/20',
    dotClass: 'bg-destructive',
  },
  draft: {
    label: 'Bản nháp',
    colorClass: 'bg-muted text-foreground-dim ring-border',
    dotClass: 'bg-foreground-dim',
  },
};

export interface StatusChipProps extends React.HTMLAttributes<HTMLSpanElement> {
  status: PropertyStatus;
  /** Ẩn dot indicator */
  hideDot?: boolean;
}

/**
 * StatusChip — hiển thị trạng thái bất động sản với màu sắc và nhãn tiếng Việt.
 */
export function StatusChip({ status, hideDot = false, className, ...props }: StatusChipProps) {
  const cfg = STATUS_CONFIG[status];
  return (
    <span
      className={cn(
        'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset',
        cfg.colorClass,
        className,
      )}
      {...props}
    >
      {!hideDot && (
        <span className={cn('h-1.5 w-1.5 rounded-full', cfg.dotClass)} aria-hidden />
      )}
      {cfg.label}
    </span>
  );
}