'use client';

import { motion } from 'framer-motion';
import { AlertTriangle, Download } from 'lucide-react';

export function DangerZone() {
  return (
    <motion.section
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: 'easeOut', delay: 0.3 }}
      className="bg-bg-card border border-red-500/20 rounded-2xl overflow-hidden"
    >
      <div className="px-6 py-4 border-b border-red-500/20 flex items-center gap-2">
        <AlertTriangle className="w-4 h-4 text-red-400/70" strokeWidth={2} />
        <h2 className="text-[15px] font-semibold text-red-400/80">Zone critique</h2>
      </div>

      <div className="divide-y divide-border/60">
        <div className="px-6 py-4 flex flex-col sm:flex-row sm:items-center gap-3">
          <div className="flex-1 min-w-0">
            <p className="text-[13px] font-medium">Annuler mon abonnement</p>
            <p className="text-[12px] text-text-dim mt-0.5">
              Ton accès reste actif jusqu&apos;à la fin de la période en cours. Les données sont
              conservées 30 jours.
            </p>
          </div>
          <button
            type="button"
            className="inline-flex items-center gap-2 text-[12.5px] text-red-400/70 hover:text-red-400 transition-colors whitespace-nowrap"
          >
            <AlertTriangle className="w-3.5 h-3.5" />
            Résilier l&apos;abonnement
          </button>
        </div>

        <div className="px-6 py-4 flex flex-col sm:flex-row sm:items-center gap-3">
          <div className="flex-1 min-w-0">
            <p className="text-[13px] font-medium">Exporter mes données</p>
            <p className="text-[12px] text-text-dim mt-0.5">
              Archive ZIP de tous tes contenus, plannings et métriques au format JSON.
            </p>
          </div>
          <button
            type="button"
            className="inline-flex items-center gap-2 text-[12.5px] text-text-dim hover:text-text transition-colors whitespace-nowrap"
          >
            <Download className="w-3.5 h-3.5" />
            Exporter les données
          </button>
        </div>
      </div>
    </motion.section>
  );
}