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

export function BackupRow({ backup }: { backup: BackupItem }) {
  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 bg-selected text-brand-soft">
        <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.name}</p>
        <p className="m-0 text-[12.5px] text-ink-soft">{backup.detail}</p>
      </div>
    </div>
  );
}