import React from "react";
import { ModSelectProps } from "./TSelect";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

class ModSelect extends React.Component<ModSelectProps> {
  constructor(props: ModSelectProps) {
    super(props);
  }

  render(): React.ReactNode {
    return (
      <Select>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder={this.props.placeholder} />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>{this.props.label}</SelectLabel>
            <SelectItem value={this.props.content[0]}>
              {this.props.content[0]}
            </SelectItem>
            <SelectItem value={this.props.content[1]}>
              {this.props.content[1]}
            </SelectItem>
            <SelectItem value={this.props.content[2]}>
              {this.props.content[2]}
            </SelectItem>
            <SelectItem value={this.props.content[3]}>
              {this.props.content[3]}
            </SelectItem>
            <SelectItem value={this.props.content[4]}>
              {this.props.content[4]}
            </SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    );
  }
}

export { ModSelect };