import React, { useState } from 'react'
import { Container, Paper, Col, Table, Button, TextInput, useMantineTheme } from '@mantine/core'

interface InventoryItem {
  id: number
  name: string
  price: number
  quantity: number
}

export default function InventoryPage() {
  const theme = useMantineTheme()
  const [items, setItems] = useState<InventoryItem[]>([])
  const [name, setName] = useState('')
  const [price, setPrice] = useState('')
  const [quantity, setQuantity] = useState('')

  const addItem = () => {
    setItems([
      ...items,
      {
        id: items.length + 1,
        name,
        price: parseFloat(price),
        quantity: parseInt(quantity),
      },
    ])
    setName('')
    setPrice('')
    setQuantity('')
  }

  return (
    <Container size="md" padding={theme.spacing.md}>
      <Paper padding={theme.spacing.md}>
        <Table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Price</th>
              <th>Quantity</th>
            </tr>
          </thead>
          <tbody>
            {items.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.name}</td>
                <td>{item.price}</td>
                <td>{item.quantity}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      </Paper>

      <Col style={{ marginTop: theme.spacing.md }}>
        <TextInput
          label="Item name"
          placeholder="Enter item name"
          value={name}
          onChange={(event) => setName(event.currentTarget.value)}
        />
        <TextInput
          label="Price"
          placeholder="Enter item price"
          value={price}
          onChange={(event) => setPrice(event.currentTarget.value)}
        />
        <TextInput
          label="Quantity"
          placeholder="Enter item quantity"
          value={quantity}
          onChange={(event) => setQuantity(event.currentTarget.value)}
        />
        <Button onClick={addItem}>Add item</Button>
      </Col>
    </Container>
  )
}