import { useConnectionStore } from '../store/connectionStore';
import type { ConnectionType } from '../types/connection';

export const ConnectionTypeSelector = () => {
    const { connectionType, setConnectionType } = useConnectionStore();

    const connectionTypes: { type: ConnectionType; label: string }[] = [
        { type: 'single-angle', label: 'Single-Angle' },
        { type: 'double-angle', label: 'Double-Angle' },
        { type: 'single-plate', label: 'Single-Plate' },
        { type: 'tee', label: 'Tee' },
    ];

    return (
        <div className="connection-type-selector">
            <div className="connection-type-title">Connection Type</div>
            <div className="connection-type-buttons">
                {connectionTypes.map(({ type, label }) => (
                    <button
                        key={type}
                        className={`connection-type-button ${connectionType === type ? 'active' : ''}`}
                        onClick={() => setConnectionType(type)}
                    >
                        <svg width="60" height="60" viewBox="0 0 60 60">
                            {/* Simplified connection diagram */}
                            <rect x="5" y="10" width="15" height="40" fill="var(--cyan-support)" stroke="black" strokeWidth="1" />
                            <rect x="20" y="20" width="15" height="20" fill="var(--yellow-angle)" stroke="black" strokeWidth="1" />
                            <rect x="35" y="10" width="20" height="40" fill="var(--green-beam)" stroke="black" strokeWidth="1" />
                            {/* Bolts */}
                            <circle cx="27" cy="25" r="2" fill="var(--bolt-color)" />
                            <circle cx="27" cy="35" r="2" fill="var(--bolt-color)" />
                            {type === 'double-angle' && (
                                <rect x="20" y="25" width="15" height="10" fill="var(--yellow-angle)" stroke="black" strokeWidth="1" />
                            )}
                        </svg>
                        <div className="connection-type-label">{label}</div>
                    </button>
                ))}
            </div>
        </div>
    );
};