
import React from 'react';
import { Helmet } from 'react-helmet';
import { Eye } from 'lucide-react';
import DataTable from '@/components/DataTable';
import StatusBadge from '@/components/StatusBadget';
import { mockUsers } from '@/data/mockData';

const UsersPage = () => {
  const columns = [
    { key: 'name', label: 'Nom', sortable: true },
    { key: 'email', label: 'Email', sortable: true },
    { key: 'role', label: 'Rôle', sortable: true },
    {
      key: 'status',
      label: 'Statut',
      sortable: true,
      render: (value) => <StatusBadge status={value === 'active' ? 'validated' : 'cancelled'} />
    },
  ];

  return (
    <>
      <Helmet>
        <title>Utilisateurs - Bijou ERP</title>
        <meta name="description" content="Gestion des utilisateurs" />
      </Helmet>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Utilisateurs</h1>
        </div>
        <DataTable columns={columns} data={mockUsers} />
      </div>
    </>
  );
};

export default UsersPage;
