import type { ReactNode } from 'react';
import styled, {css} from 'styled-components';
import { ArrowIcon } from '../Icons/ArrowIcon';
import { HeartIcon } from '../Icons/HeartIcon';

interface AccordionProps {
    id: string;
    title: string;
    description?: string;
    icon?: ReactNode;
    isOpen: boolean;
    isHighlighted?: boolean;
    onToggle: () => void;
    children: ReactNode;
}

export function Accordion({
    title,
    description,
    icon,
    isOpen,
    isHighlighted = true,
    onToggle,
    children,
}: AccordionProps) {
    return (
        <Item>
            <Header onClick={onToggle}>
                <HeaderLeft>
                    <IconCircle $highlighted={isHighlighted}>
                        {icon ?? <HeartIcon />}
                    </IconCircle>

                    <div>
                        <HeaderTitle>{title}</HeaderTitle>
                        {description && <Description>{description}</Description>}
                    </div>
                </HeaderLeft>

                <ArrowWrap $open={isOpen}>
                    <ArrowIcon />
                </ArrowWrap>
            </Header>

            <Content $open={isOpen}>
                <ContentInner>{children}</ContentInner>
            </Content>
        </Item>
    );
}

const Item = styled.div`
    border-bottom: 1px solid ${({ theme }) => theme.colors.border};
    position: relative;

    &:last-child {
        border-bottom: none;
    }
`;

const Header = styled.div`
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: 0;
    text-align: left;
    ${props => props.theme.media.mobile(css`
        padding: 10px 20px 16px 20px;
    `)};
`;

const HeaderLeft = styled.div`
    display: flex;
    align-items: center;
`;

const IconCircle = styled.div<{ $highlighted: boolean }>`
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    flex-shrink: 0;
    background: ${({ $highlighted }) => ($highlighted ? '#E6F696' : '#E7EDE7')};

    img {
        width: 40px;
        height: 40px;
    }

    svg rect {
        fill: ${({ $highlighted }) => ($highlighted ? '#E6F696' : '#E7EDE7')};
    }

    svg path {
        stroke: ${({ $highlighted }) => ($highlighted ? '#5EA12D' : '#A3ADA2')};
    }
`;

const HeaderTitle = styled.div`
    font-size: 16px;
    line-height: 19px;
    font-weight: 500;
    color: ${({ theme }) => theme.colors.darkGreen};
    ${({ theme }) => theme.media.mobile(css`
        font-size: 14px;
        line-height: 16px;
    `)}
    ${({ theme }) => theme.media.tablet(css`
        font-size: 14px;
        line-height: 16px;
    `)}
`;

const Description = styled.div`
    font-size: 16px;
    color: ${({ theme }) => theme.colors.gray};
    margin-top: 2px;
`;

const ArrowWrap = styled.div<{ $open: boolean }>`
    color: ${({ theme }) => theme.colors.gray};
    transition: transform 0.3s ease;
    transform: ${({ $open }) => ($open ? 'rotate(180deg)' : 'rotate(0deg)')};
    width: 24px;
    height: 24px;
    margin-left:8px;

    svg {
        width: 24px;
        height: 24px;
    }
`;

const Content = styled.div<{ $open: boolean }>`
    max-height: ${({ $open }) => ($open ? 'auto' : '0')};
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
`;

const ContentInner = styled.div`
    padding: 0 24px 20px;
    ${props => props.theme.media.mobile(css`
        padding: 0 20px 20px;
    `)};
`;