import React from 'react';
import type { InsuranceType } from '../types';
import { ExpireDate } from './ExpireDate';
import { getInsuranceCoverageState } from '../utils/insurance';

interface InsuranceExpireCellProps {
  insuranceType: InsuranceType;
  expireDate?: string;
  emptyLabel?: string;
  onClickNotPurchased?: () => void;
}

export function InsuranceExpireCell({
  insuranceType,
  expireDate,
  emptyLabel = '—',
  onClickNotPurchased,
}: InsuranceExpireCellProps) {
  const state = getInsuranceCoverageState(expireDate);
  if (state === 'not_purchased') {
    return (
      <span className="vm-expire">
        {onClickNotPurchased ? (
          <button
            type="button"
            className="vm-link vm-expire-date"
            onClick={onClickNotPurchased}
            title={`前往保险采购维护${insuranceType}`}
          >
            未购买
          </button>
        ) : (
          <span className="vm-expire-date">未购买</span>
        )}
        <span
          className="vm-expire-tag danger"
          title={`未购买${insuranceType}的车辆禁止交车`}
        >
          禁止交车
        </span>
      </span>
    );
  }
  return <ExpireDate date={expireDate!} emptyLabel={emptyLabel} alwaysShowRemainder />;
}
