import React from 'react';
import { daysUntilExpire, formatDateYmd, isEmpty } from '../utils/vehicle';

interface ExpireDateProps {
  date: string;
  emptyLabel?: string;
  /** 始终展示剩余/已过期天数（保险到期列） */
  alwaysShowRemainder?: boolean;
}

export function ExpireDate({ date, emptyLabel = '—', alwaysShowRemainder = false }: ExpireDateProps) {
  if (isEmpty(date)) return <span>{emptyLabel}</span>;
  const text = formatDateYmd(date);
  const days = daysUntilExpire(date);
  let tag = '';
  let tagClass = 'vm-expire-tag';
  if (days !== null) {
    if (days < 0) {
      tag = `已过期${Math.abs(days)}天`;
      tagClass += ' danger';
    } else if (alwaysShowRemainder) {
      tag = `剩余${days}天`;
      if (days <= 30) tagClass += ' warning';
    } else if (days <= 30) {
      tag = `剩余${days}天`;
      tagClass += ' warning';
    }
  }
  return (
    <span className="vm-expire">
      <span className="vm-expire-date">{text}</span>
      {tag && <span className={tagClass}>{tag}</span>}
    </span>
  );
}
