import React from 'react';
import { Box, Typography } from '@mui/material';
import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
import ReplayIcon from '@mui/icons-material/Replay';
import AssuredWorkloadIcon from '@mui/icons-material/AssuredWorkload';
import SupportAgentIcon from '@mui/icons-material/SupportAgent';

const Feature = () => {
  const features = [
    { icon: <AssignmentTurnedInIcon color="primary" sx={{ fontSize: 40 }} />, name: 'Pickup at any Store', description: "Free shipping on orders over $65" },
    { icon: <ReplayIcon color="primary" sx={{ fontSize: 40 }} />, name: 'Free returns', description:"30-days free return policy." },
    { icon: <AssuredWorkloadIcon color="primary" sx={{ fontSize: 40 }} />, name: 'Secured payments', description:"We accept all major credit cards."  },
    { icon: <SupportAgentIcon color="primary" sx={{ fontSize: 40 }} />, name: 'Customer service', description:"Top notch customer service." },
  ];

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: { xs: 'column', sm: 'row' }, // Stack on small screens, horizontal on larger screens
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 2,
        mt: 5,
        gap: { xs: 4, sm: 0 }, // Add spacing between items on smaller screens
      }}
    >
      {features.map((feature, index) => (
        <Box
          key={index}
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            textAlign: 'center',
            flex: 1,
            borderRight: { sm: index < features.length - 1 ? '1px solid #CFCFCF' : 'none' }, // Only show right border on larger screens
            padding: 2,
          }}
        >
          {feature.icon}
          <Typography
            variant="body1"
            sx={{ marginTop: 1, fontWeight: 'bold', color: 'text.primary' }}
          >
            {feature.name}
          </Typography>
          <Typography
            variant="body2"
            sx={{ marginTop: 1, color: 'text.primary' }}
          >
            {feature.description}
          </Typography>
        </Box>
      ))}
    </Box>
  );
};

export default Feature;