<script setup lang="ts">
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { DatePicker } from '@/components/ui/date-picker';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';

defineProps<{
    verificationNotes?: string | null;
}>();

const opnameDate = defineModel<string>('opnameDate', { required: true });
const notes = defineModel<string>('notes', { required: true });
</script>

<template>
    <Card>
        <CardHeader>
            <CardTitle>Informasi Dasar</CardTitle>
        </CardHeader>
        <CardContent class="space-y-4">
            <div class="grid gap-4 sm:grid-cols-2">
                <div class="space-y-2">
                    <Label for="opname_date">Tanggal Opname</Label>
                    <DatePicker
                        id="opname_date"
                        v-model="opnameDate"
                        placeholder="Pilih tanggal opname"
                    />
                </div>
            </div>

            <div class="space-y-2">
                <Label for="notes">Catatan</Label>
                <Textarea
                    id="notes"
                    v-model="notes"
                    placeholder="Catatan stok opname (opsional)"
                    rows="2"
                />
            </div>

            <div v-if="verificationNotes" class="rounded-lg border bg-muted/50 p-4">
                <Label class="text-sm font-medium">Catatan Verifikasi</Label>
                <p class="mt-1 text-sm">{{ verificationNotes }}</p>
            </div>
        </CardContent>
    </Card>
</template>
