<script>
  import CalculatorDisplay from './CalculatorDisplay.svelte';
  import CalculatorKeyboard from './CalculatorKeyboard.svelte';
  
  let currentInput = '';
  let result = '0';
  
  function handleKeyPress(key) {
    if (key === 'C') {
      currentInput = '';
      result = '0';
    } else if (key === '=') {
      try {
        result = eval(currentInput);
      } catch {
        result = 'Error';
      }
    } else {
      currentInput += key;
    }
  }
</script>

<main>
  <CalculatorDisplay displayValue={currentInput || result} />
  <CalculatorKeyboard onKeyPress={handleKeyPress} />
</main>

<style lang="scss">
  main {
    max-width: 400px;
    margin: 0 auto;
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
</style>