'use client';

import { useState } from 'react';
import { cn } from '@/lib/utils';
import { ExpressionPanel } from './ExpressionPanel';
import { GraphPanel } from './GraphPanel';
import { MobileTabs } from '@/components/ui/mobile-tabs';

type Tab = 'calc' | 'graph';

export default function Calculator() {
  const [tab, setTab] = useState<Tab>('calc');

  return (
    <div className="flex flex-col gap-4">

      <MobileTabs
        tabs={[{ value: 'calc', label: 'Calculator' }, { value: 'graph', label: 'Graph' }]}
        active={tab}
        onChange={(v) => setTab(v as Tab)}
      />

      {/* Main layout — side-by-side on lg, tabbed on mobile */}
      <div
        className="grid grid-cols-1 lg:grid-cols-5 gap-4"
        style={{ height: 'calc(100svh - 120px)'  }}
      >
        {/* Expression panel */}
        <div
          className={cn(
            'lg:col-span-2 overflow-hidden flex flex-col',
            tab !== 'calc' && 'hidden lg:flex'
          )}
        >
          <ExpressionPanel />
        </div>

        {/* Graph panel */}
        <div
          className={cn(
            'lg:col-span-3 overflow-hidden flex flex-col',
            tab !== 'graph' && 'hidden lg:flex'
          )}
        >
          <GraphPanel />
        </div>
      </div>

    </div>
  );
}