import React from 'react';
import { Seat } from './Seat';

export default {
  title: 'Toplevel/Seat',
  component: Seat,
    parameters:{
   backgrounds: {
      default: 'blue-bg',
      values: [
        { name: 'blue-bg', value: '#3444c5' }, 
      ],
    },
  },
  argTypes: {
    status: {
      control: {
        type: 'select',
        options: ['available', 'selected', 'reserved'],
      },
    },
    seatNo: { table:{disable:true}},
    // onSelect: { action: 'selected seat' },
    onClick: { action: 'onClick' },
  },
};

const Template = (args) => {
  const seats = ["A1"];
  return (
    <div style={{ display: 'flex',justifyContent:"center",marginTop:"13rem"}}>
      {seats.map((seatNo) => (
        <Seat key={seatNo} {...args} seatNo={seatNo} />
      ))}
    </div>
  );
};

export const Seats = Template.bind({});
Seats.args = {
  status: 'available',
  seatNo:"A1",
};
