import React from 'react';
import { AddItem } from '@wix/design-system';

export interface AddItemRowProps {
  onAdd: () => void;
}

export function AddItemRow({ onAdd }: AddItemRowProps) {
  return (
    <div
      data-hook="add-row-button"
      style={
        {
          borderTop: '1px solid var(--wsr-color-D60)',
          height: 36,
          boxSizing: 'border-box',
          padding: 4,
          '--wds-add-item-fill-hover': 'var(--wsr-color-D70)',
          '--wds-add-item-fill': 'transparent',
        } as React.CSSProperties
      }
    >
      <AddItem
        skin="plain"
        size="tiny"
        alignItems="left"
        removePadding
        borderRadius="6px"
        onClick={onAdd}
      >
        Add Item
      </AddItem>
    </div>
  );
}