
import React from 'react';
import { Helmet } from 'react-helmet';
import { useParams, useNavigate } from 'react-router-dom';
import { ArrowLeft, Printer, CheckSquare } from 'lucide-react';
import { mockReceptionNotes } from '@/data/mockData';

const ReceptionNoteDetailPage = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const note = mockReceptionNotes.find(n => n.id === parseInt(id));

  if (!note) return <div>Bon de réception introuvable</div>;

  return (
    <>
      <Helmet>
        <title>{note.number} - Réception - Bijou ERP</title>
      </Helmet>
      <div className="max-w-5xl mx-auto space-y-6">
        <div className="flex items-center gap-4">
           <button onClick={() => navigate('/bons-reception')} className="p-2 hover:bg-white rounded-lg"><ArrowLeft className="w-5 h-5" /></button>
           <h1 className="text-2xl font-bold flex-1">{note.number}</h1>
        </div>
        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
           <h3 className="font-semibold mb-4">Articles Réceptionnés</h3>
           {note.items.map((item, idx) => (
             <div key={idx} className="flex justify-between py-2 border-b last:border-0">
                <span>{item.description}</span>
                <span className="font-medium">{item.quantity} unités</span>
             </div>
           ))}
        </div>
      </div>
    </>
  );
};
export default ReceptionNoteDetailPage;
