'use client';

import * as React from 'react';
import { Typography } from '@mui/material';
import ListItemIcon from '@mui/material/ListItemIcon';
import { Box } from '@mui/system';
import { Trash as TrashIcon } from '@phosphor-icons/react/dist/ssr/Trash';

interface PropsHelloworld {
  message: string;
}

// RULES: Sample of function
function funcHelloworld(hello: string): string {
  const helloworld: PropsHelloworld = { message: hello };
  const output = `${helloworld.message} world!`;

  return output;
}

// RULES: sample of inner component
function InnerComponent(): React.JSX.Element {
  return (
    <Box>
      <Typography sx={{ color: 'red' }}>inner component</Typography>
      <ListItemIcon />
      <TrashIcon />
    </Box>
  );
}

// RULES: naming should be in Pascal case
// RULES: sample of main component
function MainComponent(): React.JSX.Element {
  const [state, setState] = React.useState<string>('');

  React.useEffect(() => {
    setState(funcHelloworld('hello'));
  }, []);

  // you should obey react/jsx-no-useless-fragment
  return (
    <Box>
      {state} <InnerComponent />
    </Box>
  );
}

// RULES: component should be exported
export default MainComponent;