import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { ChevronRight, Info } from 'lucide-react';
import { useState } from 'react';

import styles from './ToolsIntroAccordion.module.scss';

type ToolsIntroAccordionProps = {
	content: string;
	ctaTitle: string;
};

const ToolsIntroAccordion = ({ content, ctaTitle }: ToolsIntroAccordionProps) => {
	const [expanded, setExpanded] = useState(false);

	const handleToggleExpand = () => {
		setExpanded((prev) => !prev); // toggle the expansion
	};

	const processContent = () => content.replace(/class=/g, `class="${styles.subtitle}`);

	return (
		<Accordion className={styles.toolsAccordion} expanded={expanded}>
			<AccordionSummary
				aria-controls="panel1a-content"
				expandIcon={<ExpandMoreIcon />}
				id="panel1a-header"
				onClick={(e) => {
					e.preventDefault();
					handleToggleExpand();
				}}
			>
				<Typography>
					<Info size={16} /> Show me how this works
				</Typography>
			</AccordionSummary>
			<AccordionDetails>
				<div dangerouslySetInnerHTML={{ __html: processContent() }} />
				<a
					href="#"
					onClick={(e) => {
						e.preventDefault();
						handleToggleExpand();
					}}
					className={styles.start}
				>
					<ChevronRight size={15} /> {ctaTitle}
				</a>
			</AccordionDetails>
		</Accordion>
	);
};

export default ToolsIntroAccordion;