<script>
  import { formatSize } from '../lib/api.js'

  let { file, downloadUrl } = $props()
</script>

<div class="warning-card">
  <div class="badge">[!] DANGEROUS FILE</div>
  <p class="name">{file.name}</p>
  <p class="meta">{file.mime} • {formatSize(file.size)}</p>
  <p class="notice">
    This file may be dangerous. Never execute unknown files. Only download if you trust the source.
  </p>
  <a class="btn danger" href={downloadUrl} download={file.name}>Download at your own risk</a>
</div>

<style>
  .warning-card {
    max-width: 600px;
    margin: 24px auto;
    padding: 24px;
    background: #fff8f8;
    border: 3px solid var(--retro-danger);
    box-shadow: 6px 6px 0px rgba(139,26,26,0.15);
    text-align: center;
  }
  .badge {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.6rem;
    color: var(--retro-danger);
    margin-bottom: 12px;
  }
  .name {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7rem;
    word-break: break-all;
  }
  .meta {
    font-size: 0.9rem;
    color: #666;
    margin: 8px 0;
  }
  .notice {
    font-size: 1rem;
    color: #555;
    margin: 16px 0;
  }
  .btn.danger {
    border-color: var(--retro-danger);
    color: var(--retro-danger);
  }
  .btn.danger:hover {
    background: var(--retro-danger);
    color: #fff;
  }
</style>
