import { IconChevronDown, IconChevronUp, IconFilter } from '@douyinfe/semi-icons';
import { Button } from '@douyinfe/semi-ui';

type MobileFilterToggleProps = {
  title?: string;
  summary: string;
  expanded: boolean;
  onToggle: () => void;
  controls?: string;
  expandedLabel?: string;
  collapsedLabel?: string;
};

export function MobileFilterToggle({
  title = '筛选条件',
  summary,
  expanded,
  onToggle,
  controls,
  expandedLabel = '收起',
  collapsedLabel = '展开'
}: MobileFilterToggleProps) {
  const actionLabel = expanded ? expandedLabel : collapsedLabel;
  return <Button
    className="v2-mobile-filter-toggle"
    theme="light"
    type="tertiary"
    block
    htmlType="button"
    aria-expanded={expanded}
    aria-controls={controls}
    aria-label={`${actionLabel}${title}：${summary}`}
    onClick={onToggle}
  >
    <span className="v2-mobile-filter-toggle-content">
      <span className="v2-mobile-filter-toggle-icon" aria-hidden="true"><IconFilter /></span>
      <span className="v2-mobile-filter-toggle-copy"><b>{title}</b><small>{summary}</small></span>
      <span className="v2-mobile-filter-toggle-action">{actionLabel}{expanded ? <IconChevronUp /> : <IconChevronDown />}</span>
    </span>
  </Button>;
}
