'use client';

import { useState } from 'react';
import ProductForm from '../../inventory/ProductForm';

export default function ExpandableCreateProductSection() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <section
      style={{
        border: '2px solid #0070f3',
        borderRadius: '8px',
        marginBottom: '1.5rem',
        overflow: 'hidden',
      }}
    >
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        style={{
          width: '100%',
          padding: '1rem',
          background: '#0070f3',
          color: 'white',
          border: 'none',
          fontSize: '1.1rem',
          fontWeight: 600,
          cursor: 'pointer',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          transition: 'background 0.2s',
        }}
        onMouseEnter={(e) => {
          (e.target as HTMLElement).style.background = '#0059cc';
        }}
        onMouseLeave={(e) => {
          (e.target as HTMLElement).style.background = '#0070f3';
        }}
      >
        <span>➕ Skapa produkt</span>
        <span style={{ fontSize: '1.5rem', transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}>
          ▼
        </span>
      </button>

      {isExpanded && (
        <div style={{ padding: '1rem', background: '#f9f9f9' }}>
          <ProductForm />
        </div>
      )}
    </section>
  );
}