import React from 'react';
import { useNavigate } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser, faUsers, faUtensils, faLock, faCogs, faKey } from '@fortawesome/free-solid-svg-icons';
import { Card, CardContent, Typography, Box } from '@mui/material';

const CardItem = ({ title, content, icon, path }) => {
  const navigate = useNavigate();
  
  return (
    <Card 
      sx={{ 
        width: 300,
        height: 150,
        m: 2,
        cursor: 'pointer',
        transition: 'transform 0.2s',
        '&:hover': {
          transform: 'scale(1.05)',
          boxShadow: '10px 10px 10px 10px rgba(25,118,210,0.15)'
        },
        boxShadow: '10px 10px 10px 10px rgba(0,0,0,0.05)',
        backgroundColor: '#fff',
        borderRadius: '8px',
        display: 'flex',
        alignItems: 'center'
      }}
      onClick={() => navigate(path)}
    >
      <CardContent sx={{ 
        display: 'flex',
        alignItems: 'center',
        width: '100%',
        padding: '16px !important'
      }}>
        <Box sx={{
          backgroundColor: '#1976d2',
          borderRadius: '50%',
          width: 50,
          height: 50,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          marginRight: 2,
          color: 'white'
        }}>
          <FontAwesomeIcon icon={icon} style={{ fontSize: '1.2rem' }} />
        </Box>
        <Box>
          <Typography variant="subtitle1" component="div" fontWeight="bold">
            {title}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            {content}
          </Typography>
        </Box>
      </CardContent>
    </Card>
  );
};

const CardList = () => {
  const cards = [
    {
      title: "User Maintenance",
      content: "Manage users",
      icon: faUser,
      path: "/dashboard/setup/user-maintenance"
    },
    {
      title: "User Group Maintenance",
      content: "Manage user groups",
      icon: faUsers,
      path: "/dashboard/setup/user-group-maintenance"
    },
    {
      title: "Menu Maintenance",
      content: "Manage menus",
      icon: faUtensils,
      path: "/dashboard/setup/menu-maintenance"
    },
    {
      title: "Menu Access Control",
      content: "Control menu access",
      icon: faLock,
      path: "/dashboard/setup/menu-access-control"
    },
    {
      title: "System Parameters",
      content: "Configure system parameters",
      icon: faCogs,
      path: "/dashboard/setup/system-parameters"
    },
    {
      title: "Access Type",
      content: "Manage access types",
      icon: faKey,
      path: "/dashboard/setup/access-type"
    },
    {
      title: "Document Sequence",
      content: "generate sequence",
      icon: faCogs,
      path: "/dashboard/setup/document-sequence"
    },
    {
      title: "Api Registry",
      content: "Manage APIs",
      icon: faUser,
      path: "/dashboard/setup/api-registry"
    },
    {
      title: "Token Registry",
      content: "Manage tokens",
      icon: faKey,
      path: "/dashboard/setup/token-registry"
    },
  ];

  return (
    <Box sx={{ 
      display: 'flex', 
      flexWrap: 'wrap', 
      justifyContent: 'center',
      padding: '2rem',
      //backgroundColor: '#f5f5f5',
    //   minHeight: '100vh'
    }}>
      {cards.map((card, index) => (
        <CardItem
          key={index}
          title={card.title}
          content={card.content}
          icon={card.icon}
          path={card.path}
        />
      ))}
    </Box>
  );
};

export default CardList;