import React, { useState } from 'react';
import { Td, Tr, Link, Select } from '@chakra-ui/react';
import i18next from 'i18next';

const statuses = ['pending', 'progress', 'working', 'canceled', 'complete'];

const OrderItem = ({
  carNumber,
  washTime,
  orderDate,
  status,
  phone,
  location,
}) => {
  const [statusSelect, setStatus] = useState(status);

  return (
    <Tr>
      <Td>{carNumber}</Td>
      <Td>{washTime}</Td>
      <Td>{orderDate}</Td>
      <Td>
        <Select
          value={statusSelect}
          onChange={(e) => setStatus(e.target.value)}
          placeholder={i18next.t(`dry-wash.arm.order.status.placeholder`)}
        >
          {statuses.map((status) => (
            <option key={status} value={status}>
              {i18next.t(`dry-wash.arm.order.status.${status}`)}
            </option>
          ))}
        </Select>
      </Td>
      <Td>
        <Link href='tel:'>{phone}</Link>
      </Td>
      <Td>{location}</Td>
    </Tr>
  );
};

export default OrderItem;