"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Alert, AlertDescription } from "@/components/ui/alert";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import type { useProfileSettings } from "@/hooks/useProfileSettings";

type DisplaySectionProps = Pick<
  ReturnType<typeof useProfileSettings>,
  | "listPageSize"
  | "listPageSizeError"
  | "listPageSizeSuccess"
  | "listPageSizeLoading"
  | "handleChangeListPageSize"
>;

export function DisplaySection({
  listPageSize,
  listPageSizeError,
  listPageSizeSuccess,
  listPageSizeLoading,
  handleChangeListPageSize,
}: DisplaySectionProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Listenansicht</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="list-page-size">Eintraege pro Seite</Label>
          <Select
            value={listPageSize}
            onValueChange={handleChangeListPageSize}
            disabled={listPageSizeLoading}
          >
            <SelectTrigger id="list-page-size" className="w-40">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="25">25</SelectItem>
              <SelectItem value="50">50</SelectItem>
              <SelectItem value="100">100</SelectItem>
              <SelectItem value="200">200</SelectItem>
            </SelectContent>
          </Select>
        </div>
        {listPageSizeError && (
          <Alert variant="destructive">
            <AlertDescription>{listPageSizeError}</AlertDescription>
          </Alert>
        )}
        {listPageSizeSuccess && (
          <Alert>
            <AlertDescription>{listPageSizeSuccess}</AlertDescription>
          </Alert>
        )}
      </CardContent>
    </Card>
  );
}
