import type { BackupDevice } from '../../types';
import { DataIcon } from '../icons/DataIcon';

const STATUS_CLASSES: Record<BackupDevice['status'], string> = {
  'up-to-date': 'bg-success/16 text-success',
  syncing: 'bg-violet/16 text-violet',
  late: 'bg-danger/16 text-danger',
};

const ICON_TONE: Record<BackupDevice['status'], string> = {
  'up-to-date': 'bg-selected text-brand-soft',
  syncing: 'bg-violet/16 text-violet',
  late: 'bg-danger/16 text-danger',
};

export function BackupRow({ backup }: { backup: BackupDevice }) {
  return (
    <div className="flex flex-wrap items-center gap-4 rounded-2xl border border-line bg-panel p-[18px]">
      <span className={`flex h-10 w-10 flex-none items-center justify-center rounded-xl ${ICON_TONE[backup.status]}`}>
        <DataIcon name={backup.icon} size={19} />
      </span>
      <div className="min-w-0 flex-1 basis-[200px]">
        <p className="m-0 mb-[3px] text-[14.5px] font-bold text-ink">{backup.device}</p>
        <p className="m-0 text-[12.5px] text-ink-soft">{backup.detail}</p>
      </div>
      <span className={`flex-none rounded-full px-3 py-1.5 text-[11.5px] font-bold ${STATUS_CLASSES[backup.status]}`}>
        {backup.statusLabel}
      </span>
    </div>
  );
}