'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';

import { logger } from '@/lib/default-logger';
import { toast } from '@/components/core/toaster';

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>('');
  const [loading, setLoading] = React.useState(true);
  const [showError, setShowError] = React.useState<boolean>(false);

  React.useEffect(() => {
    try {
      setState(funcHelloworld('hello'));
    } catch (error) {
      setShowError(true);
    }
    setLoading(false);
  }, []);

  if (loading) return <>Loading</>;
  if (showError) return <>Error</>;

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

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