import styled from 'styled-components';

interface DaysSectionProps {
    value: number;
    onChange: (value: number) => void;
}

const options = [1, 3, 7];

export function DaysSection({ value, onChange }: DaysSectionProps) {
    return (
        <DaysOptions>
            {options.map(option => (
                <DayButton
                    key={option}
                    type="button"
                    $active={value === option}
                    onClick={() => onChange(option)}
                >
                    {option}
                </DayButton>
            ))}
        </DaysOptions>
    );
}

const DaysOptions = styled.div`
    display: flex;
    gap: 12px;
`;

const DayButton = styled.button<{ $active: boolean }>`
    flex: 1;
    max-width: 140px;
    height: 52px;
    border: 2px solid ${({ $active }) => ($active ? '#5EA12D' : '#e1e1e1')};
    border-radius: 8px;
    background: ${({ $active }) => ($active ? '#E6F696' : '#ffffff')};
    font-size: 16px;
    line-height: 19px;
    font-weight: 350;
    color: ${({ theme }) => theme.colors.darkGreen};
    cursor: pointer;
    transition: 0.2s;

    &:hover {
        border-color: ${({ theme }) => theme.colors.green};
    }

    &:focus {
        outline: none;
    }
`;