import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/Button';

interface SupportFooterWidgetProps {
  title?: string;
  description?: string;
  buttonText?: string;
}

export const SupportFooterWidget: React.FC<SupportFooterWidgetProps> = ({
  title = "Besoin d'un cadrage sur-mesure ?",
  description = "Nos ingénieurs restent joignables pour les demandes complexes.",
  buttonText = "Consulter le Service Desk"
}) => {
  const navigate = useNavigate();

  return (
    <div className="mt-12 bg-slate-500 text-slate-300 rounded-xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-sm">
      <div>
        <h4 className="text-sm font-bold text-white">{title}</h4>
        <p className="text-xs text-slate-400 mt-0.5">
          {description}
        </p>
      </div>
      <Button
        variant="ghost" // On utilise ghost pour ne pas avoir le fond blanc par défaut
        size="sm"
        onClick={() => navigate('/support')}
        // On surcharge les couleurs pour l'adapter au fond sombre
        className="border border-slate-700 text-slate-200 hover:bg-slate-800 hover:text-white hover:border-slate-600 text-xs whitespace-nowrap"
      >
        {buttonText}
      </Button>
    </div>
  );
};

export default SupportFooterWidget;