import style from '../AdminTable/Admin.module.css';
import type { CollapseProps } from 'antd';
import { Button, Collapse } from 'antd';
import styled from 'styled-components';

type IProps = {
  readonly data: string;
  readonly index: number;
  readonly name: string;
  readonly onClick: (name: string) => void;
};

const Wrapper = styled.div`
  display: flex;
  justify-content: space-between;
`;

export default function AdminRow(props: IProps) {
  const { data, index, name, onClick } = props;

  const handleClick = () => {
    onClick(name);
  };

  const items: CollapseProps['items'] = [
    {
      children: <p>{data}</p>,
      key: index.toString(),
      label: data,
    },
  ];

  return (
    <Wrapper>
      <Collapse className={style.collapse} items={items} />
      <Button onClick={handleClick}>Удалить</Button>
    </Wrapper>
  );
}