import * as React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import ImageIcon from '@mui/icons-material/Image';
import WorkIcon from '@mui/icons-material/Work';
import BeachAccessIcon from '@mui/icons-material/BeachAccess';
import { borderBottom } from '@mui/system';

const listItemStyle = {
  minWidth: {lg:'200px', md:'200px', sm:'200px', xs:'150px'}, maxWidth: {lg:'200px', md:'200px', sm:'200px', xs:'150px'},
  
  "& span": {
    fontWeight: '600',
    fontSize: {lg:'14px', md:'14px', sm:'14px', xs:'12px', '@350':'10px'}
  }
}
const listDescItemStyle = {
  
  "& span": {
    // fontWeight: 'bold',
    fontSize: {lg:'14px', md:'14px', sm:'14px', xs:'12px'}
  }
}

export default function StyledListItem({ title, desc }: { title: string, desc: string }) {
  return (
    <ListItem sx={{ alignItems: 'start', 
    borderBottom: '1px solid #00000017',paddingTop: '1px', paddingBottom: '1px',
    paddingLeft:{lg:2, md:2, sm:1, xs:0}, paddingRight:{lg:2, md:2, sm:1, xs:0}
    }}>
      <ListItemText primary={title} sx={listItemStyle} />
      <ListItemText sx={listDescItemStyle}>
        {desc}
      </ListItemText>
    </ListItem>
  );
}