import { Icon } from "@iconify/react/dist/iconify.js";
import { useState } from "react";
import styled from "styled-components";

export function InformacionAdicionalNC({
  informacionAdicional,
  onInformacionAdicionalChange,
}) {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <Container>
      <ToggleButton
        onClick={() => setIsExpanded(!isExpanded)}
        $isExpanded={isExpanded}
      >
        <Icon icon="mdi:information-outline" />
        Información Adicional
        <Icon 
          icon={isExpanded ? "mdi:chevron-up" : "mdi:chevron-down"} 
          className="chevron"
        />
      </ToggleButton>

      {isExpanded && (
        <Content>
          <textarea
            value={informacionAdicional || ""}
            onChange={(e) => onInformacionAdicionalChange?.(e.target.value)}
            placeholder="Información adicional sobre la nota de crédito..."
            rows={3}
          />
        </Content>
      )}
    </Container>
  );
}

const Container = styled.div`
  background: ${({ theme }) => theme.bg2};
  border-radius: 12px;
  border: 1px solid ${({ theme }) => theme.color2};
  overflow: hidden;
`;

const ToggleButton = styled.button`
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: ${({ theme, $isExpanded }) => 
    $isExpanded ? theme.primary + '15' : theme.bg3
  };
  border: none;
  color: ${({ theme }) => theme.text};
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background: ${({ theme }) => theme.primary + '20'};
  }

  .chevron {
    transition: transform 0.2s;
  }

  svg:first-child {
    color: ${({ theme }) => theme.primary};
    margin-right: 8px;
  }
`;

const Content = styled.div`
  padding: 16px 20px;
  border-top: 1px solid ${({ theme }) => theme.color2};

  textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid ${({ theme }) => theme.color2};
    border-radius: 8px;
    background: ${({ theme }) => theme.bg3};
    color: inherit;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: all 0.2s;

    &:focus {
      outline: none;
      border-color: ${({ theme }) => theme.primary};
      box-shadow: 0 0 0 3px rgba(125, 211, 168, 0.1);
    }

    &::placeholder {
      color: ${({ theme }) => theme.textSecondary};
    }
  }
`;